TypeScript + React で作る checkbox の checked と defaultChecked を型で「排他」にしてエラー検知しやすくした話 - Qiita
import React, { FC } from 'react'; interface Props { checked?: boolean; } const Checkbox: FC<Props> = ({ checked = false }) => ( <input type="checkbox" checked={checked} /> ); export default Checkbox; 超最低限で書くと、こんな感じになります！ checked という Props を用意して、それを <input> に流しています。 流れてくる boolean によって、 checkbox の check 状態を制御できるようになっているわけです。 外部から <Checkbox checked={true} /> とすれば「check された状態」になりますし、 <Checkbox checke
覚えれば一生もの！ ウェブエンジニアのための正規表現活用入門 - ICS MEDIA
正規表現は文字列の検索や置換を行うための強力で便利なツールです。基本をマスターすれば開発から日常の事務作業までさまざまな場面でラクをできる魔法の道具ですが、見た目がちょっと分かりづらいので、避けている方もいるのではないでしょうか？ 筆者の個人的観測ですが、とりわけフロントエンドのエンジニアには正規表現に苦手意識を感じている方が多いようです。 この記事では正規表現の基本と、正規表現がどこで使えてどれだけ便利になるのかを紹介します。 正規表現の基本：正規表現ってそもそも何？ 正規表現（regular expression）は、ごく簡単にいえば「さまざまな文字列のバリエーションをひとつの文字列で表現したもの」です。たとえば、郵便番号の7桁の数字には（実際に使われていないものも含めれば）一千万通りのバリエーションがありますが、正規表現を使えば次のようにひとつの文字列で表現できます。 ▼「7桁の数字
📝数値という理由だけで input[type="number"] 要素を使わない｜たかもそ／Web Creator.
フォームに入力する値といえば、電話番号や年齢、クレジットカード番号など様々です。しかし、数字を使っているからといってむやみに <input type="number"> 要素を使うと問題が起きます。 数字であって数値でないWHATWG の仕様には次のように書かれています。 The type=number state is not appropriate for input that happens to only consist of numbers but isn't strictly speaking a number. For example, it would be inappropriate for credit card numbers or US postal codes. A simple way of determining whether to use type=num
![📝数値という理由だけで input[type="number"] 要素を使わない｜たかもそ／Web Creator.](https://cdn-ak-scissors.b.st-hatena.com/image/square/fabaee500541121aedd5673e2ef24a6ad3fc46aa/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F20987625%2Frectangle_large_type_2_6362b402374299fdb8316dd17855d5fb.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
PHP で $_GET $_POST で Notice: Undefined index: が出る : Serendip – Webデザイン・プログラミング
以下のような記述が .php 内にあった場合、Notice: Undefined index: id in /Users/foo/public_html/hoge.php on line n と表示される。 $id = $_GET['id']; これは、外部からの汚染された引数が渡されたことが原因なので、htmlspecialchars を使ってサニタイズすると警告が表示されなくなる。 $id = htmlspecialchars(@$_GET['id']); 上の方法では、@を使ってエラー出力を抑制しているだけ。 $_GET['id'] の値が初期化されていないためにエラーとなっているので、isset で初期化チェックをおこなう。 $id = isset($_GET['id']) ? htmlspecialchars($_GET['id']) : null; 修正：2011/6/1
チェックボックスを変更不可にする方法
フォームでチェックボックスを変更不可にする方法を紹介します。 １．はじめに ある案件で「フォームのチェックボックスをチェックしたままの状態（ユーザーが操作できない）にしたい」という要望がありました。 が、readonly属性ではチェックボックスは操作不可にできないようです。 <input type="checkbox" name="foo" value="1" checked="checked" readonly="readonly" /> また操作不可にするにはdisabled属性を追加するがありますが、disabledにするとそもそもフォームの送信対象から外れてしまいます。 <input type="checkbox" name="foo" value="1" checked="checked" disabled="disabled" /> ということで何かいい方法はないでしょうか。
inputに背景が勝手につくCSSの解決法
iPhoneの時だけ、どうしても余計な背景が出てきてしまう状況がありました。 input要素のボタンをテキストに変更した時にハマったことと解決策をメモしておきます。 この事象についてキーワードを並べると、 CSSを確認しても背景に無いもかかってない。 importantも効かない。 iOS SimulatorでCSS全部確認しても、全く背景色の要素が存在しない。 Androidだと背景は出てこない大丈夫。 完全にはまりました。 このように、inputに背景がでてきてしまいます。 iPhoneの時だけです。Androidはの背景は#fffで白くなっている様子。 これはいわゆるCSSのリセットで解決できました。
LOTUS303 : Daftar Situs Judi Slot Online & IDN Slot Gacor Terbaru
LOTUS303 : Daftar Situs Judi Slot Online & IDN Slot Gacor Terbaru LOTUS303 merupakan situs judi slot online terbaik dan terpercaya no 1 di Indonesia yang menawarkan game slot gacor gampang menang jackpot slot maxwin. Kami juga menyediakan pilihan taruhan judi online uang asli seperti judi bola, idn live, casino online, tembak ikan, domino, idn poker online terbaik mencakup seluruh bidang permainan
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
jQueryでフォームデータを送信する方法のまとめ
jQueryでフォームデータを送信する方法のまとめです。 １．submitイベントで送信する form要素のsubmitイベントで送信する場合のサンプルは次のとおりです。 <script src="http://code.jquery.com/jquery.js"></script> <script> $(function(){ $('form').submit(function(event){ event.preventDefault(); var f = $(this); $.ajax({ url: f.prop('action'), type: f.prop('type'), data: f.serialize(), timeout: 10000, dataType: 'text' }) .done(function( data ) { // 通信が成功したときの処理 }) .fai
jQuery.uploadプラグインで親要素のonsubmitを起動させない対処
以前紹介した「jQuery.uploadプラグイン」で、onsubmitを起動しない対処方法を紹介します。 １．「jQuery.uploadプラグイン」について 「jQuery.uploadプラグイン」はAjaxによるファイルのアップロードが行えるようにするためのプラグインです。 jQuery.upload ２．問題点 元のフォームにonsubmitなどのイベントがある場合、jQuery.uploadでファイルをアップロードするとonsubmitまで起動してしまいます。 具体的には、jQuery.uploadで選択したファイルをサーバにアップロードして、そこからファイル情報をJSONで取得してブラウザに表示させ、その内容がOKであれば本来のフォーム送信やファイルアップロードを行いたいのですが、最初のファイルアップロードでフォーム情報が送信されてしまいます。 元のフォームのonsubmitが
フォーム入力中に誤って消えてしまった文字を復活させるFirefox用アドオン「Textarea Cache」
問い合わせるために文章などをフォームに長々と入力しているときに、意図せずブラウザを閉じてしまって、文章を書き直すことがありますが、Firefox用のアドオン「Textarea Cache」を使えば、消えてしまった文章を簡単に元に戻すことができます。アドオンのインストールと操作方法については以下から。 Textarea Cache :: Add-ons for Firefox https://addons.mozilla.org/en-US/firefox/addon/textarea-cache/ Firefoxから上記サイトへアクセスし「＋ Add to Firefox」をクリック。 「今すぐインストール」をクリック。 「今すぐ再起動」をクリックして、Firefoxを再起動させればインストールの完了です。 ◆使い方 例えばHotmailなどを使ってメール本文を作成しているときに、誤ってブ
onclickイベントとjQueryのclickイベントを併用するときの注意
利用シーンはあまりないと思いますが、onclickイベントにjQueryのclickイベントを追加するときの注意点をまとめました。 次のようなレガシーな処理があると仮定します。 onclickイベントでsendというメソッドを呼び出し、フォームのチェック処理を行ったあとsubmit()を実行しています。 <script> function send() { // 既存のチェック処理など document.test.submit(); } </script> <form id="test" name="test" method="post" action="index.cgi" onsubmit="retrun false;"> <input name="foo" id="foo" type="text" value="$foo" /> <input id="bar" type="butto
for 属性に対する属性セレクタの IE7 での挙動
IE7 には、label 要素の for 属性に対する CSS の属性セレクタが無効になるバグがあります。 label[for="foo"] { background-color: yellow; } この場合 for="foo" という属性を持つ label 要素の背景が黄色になるはずですが、IE7 では無視されてしまいます。これはどうやら for というキーワードが DOM の予約語であることに由来するバグのようです (参考: Attribute Selector (CSS selector) - SitePoint CSS Reference)。そのかわり、IE7 では htmlFor という属性名を利用すればスタイルが有効になります。 label[htmlFor="foo"] { background-color: yellow; } ただこれだと IE8 以降やほかのブラウザが解
リターン（Enterキー）でフォームを送信しない方法
フォームのテキスト入力中にうっかりリターン（Enterキー）を押してしまい、中途半端なフォームが送信されてしまったという経験をした人は結構多いのではないかと思います。 ということで、リターン（Enterキー）でフォームを送信しないようにする方法を紹介します。この記事の投稿時点でのGoogle Chrome・Firefoxの最新版とIE9で同じ動作になることを確認しています。 １．リターンでフォームが送信される原因 次のように、type属性が「text」のinput要素、いわゆるテキストフィールドが含まれるフォームで、テキストフィールドがアクティブなときにリターンを押すとフォームが送信されてしまいます。 <form action="hoge.cgi"> <input type="text" name="foo" /> <input type="text" name="bar" /> <inp
スパム対策にWordPressのコメントフォームをJavaScriptで出力するようにしてみた。 | Ginpen.com
<script type="text/x-html"> <?php comment_form(); ?> </script> <script type="text/javascript"> (function() { var s = document.getElementsByTagName('script'); document.write(s[s.length-2].text); }()); </script> <noscript><p>Turn on JavaScript to comment.</p></noscript> 出力されるフォームのHTMLをまるごとscript要素内に閉じ込めて非HTMLとして出力し、直後にスクリプトでそれをdocument.write()で書き出す、という。 type="text/x-html"については別の記事参照。 どんなデータでもページに埋め込
お絵かきでCAPTCHAできるようにするjQueryプラグイン「MotionCAPTCHA」:phpspot開発日誌
MotionCAPTCHA ? Stop Spam, Draw Shapes - Joss Crowcroft お絵かきでCAPTCHAできるようにするjQueryプラグイン「MotionCAPTCHA」がなかなかすごいです。 フォーム下に線画を用意しておいて、それをマウスでなぞってValidateするみたいです。 次のようになぞって正しい形だとパスできます 形がマッチしていないとやり直しになります。 必要なライブラリを読み込んでルール通りにHTMLを記述すれば $('#form-id').motioncaptcha(); で初期化が可能です。 内部的にどのぐらい強固になっているかは調べていませんが、ロボットに入力させるのはちょっと難しそうですね。 関連エントリ iPhoneのロック解除風UIでCAPTCHAするjQueryプラグイン「QapTcha」 PHPとGDを使ってCaptchaを
入力するのが楽しくなる、アニメーション機能を伴ったフォームを作成するチュートリアル | コリス
jQueryとCSS3を使って、複数のステップをアニメーションで次々に表示するフォームを実装するチュートリアルを紹介します。 How to Create A Multi-Step Signup Form With CSS3 and jQuery デモページ フォームの下部にある「プログレスバー」の存在もユーザビリティ的に見逃せない存在です。 [ad#ad-2] フォームのデモ フォームは全部で4つのステップで構成されており、さまざまなスパイスが含まれています。 2枚目のフォーム フォームの進捗状況は、下部のプログレスバーに表示されます。 ※個人的には%でなく、2/4が分かりやすいと思います。 フォームの実装 HTML：基本構造 フォームの基本構造は、4つのステップをそれぞれdiv要素に格納します。 <div id="container"> <form action="#" method="
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIの使いづらさにイラッとする！これがフォームで使いにくい最悪なユーザインターフェイスだ -User Inyerface
PuzzleCAPTCHA
IDEA * IDEA
