HTML5のフォーム
インタラクティブなフォームを作成するためのHTML要素
新着！ 私の44ページ電子書籍「44分でCSS」が公開されました！ 😃
# fieldset
フォーム内のコントロールのグループを定義します。
例： コピー
<form action="/subscribe" method="post">
<fieldset>
<legend>Subscribe to the Newsletter</legend>
<input type="email" name="email">
<button>Ok</button>
</fieldset>
</form>
disabled
fieldsetに含まれるコントロールを無効にします。
値は不要です。# form
コントロールを備えたインタラクティブなフォームを定義します。
例： コピー
<form action="/signup" method="post">
<p>
<label>Title</label><br>
<label>
<input type="radio" name="title" value="mr">
Mr
</label>
<label>
<input type="radio" name="title" value="mrs">
Mrs
</label>
<label>
<input type="radio" name="title" value="miss">
Miss
</label>
</p>
<p>
<label>First name</label><br>
<input type="text" name="first_name">
</p>
<p>
<label>Last name</label><br>
<input type="text" name="last_name">
</p>
<p>
<label>Email</label><br>
<input type="email" name="email" required>
</p>
<p>
<label>Phone number</label><br>
<input type="tel" name="phone">
</p>
<p>
<label>Password</label><br>
<input type="password" name="password">
</p>
<p>
<label>Country</label><br>
<select>
<option>China</option>
<option>India</option>
<option>United States</option>
<option>Indonesia</option>
<option>Brazil</option>
</select>
</p>
<p>
<label>
<input type="checkbox" value="terms">
I agree to the <a href="/terms">terms and conditions</a>
</label>
</p>
<p>
<button>Sign up</button>
<button type="reset">Reset form</button>
</p>
</form>
action
送信時にフォームの情報が送信されるURLを定義します。
"/contact"
相対URLを使用できます。
"https://htmlreference.dokyumento.jp/contact"
絶対URLを使用できます。
method
フォームを送信するときに使用されるHTTPメソッドを定義します。
"post"
フォーム情報は、リクエストボディの一部としてサーバーに送信されます。
"get"
フォーム情報は、URLパラメータの一部としてサーバーに送信されます： /contact?first_name=Alex&last_name=Smith。
name
サーバーに送信されたときのフォームの名前。同じWebページに複数のフォームが存在する場合に便利です。
"sign_up_form"
nameの値は、Webページ全体で一意である必要があります。
英数字a-z A-Z 0-9、および- _のような一部の特殊文字のみを含めることができます。スペースは含めることはできません。
autocomplete
ブラウザがフォームのすべてのコントロールを自動補完できるかどうかを決定します。
"off"
ブラウザは自動補完機能を無効にします。ただし、これは各コントロールで個別にオーバーライドできます。
"on"
ブラウザは自動補完機能を有効にします。ただし、これは各コントロールで個別にオーバーライドできます。
この入力で「下」を押してみてください。以前に入力したメールアドレスが表示されます。
target
クリックしたリンクが表示されるタブまたはウィンドウを定義します。
"_blank"
新しいブラウジングコンテキストで開きます。これは通常、新しいタブです。
"_self"
現在のタブで開きます。
"_parent"
親のブラウジングコンテキストで開きます。または、ない場合は_self。
"_top"
トップのブラウジングコンテキストで開きます。または、ない場合は_self。
enctype
サーバーに送信される情報のMIMEタイプを定義します。メソッドがpostの場合にのみ機能します。
"application/x-www-form-urlencoded"
デフォルト値。
"text/plain"
HTML5のプレーンテキストの場合。
"multipart/form-data"
<input type="file">要素を使用する場合に必要です。
novalidate
送信時にブラウザにフォームを検証しないように指示します。
値は不要です。# input
Webフォーム内のインタラクティブなコントロールを定義します。
例： コピー
<input type="text" name="first_name" placeholder="e.g. Alex">
type
フォーム入力のタイプを定義します。
必須。
"text"
任意のタイプの文字を受け入れる単純な1行のテキスト入力
"email"
テキスト入力のようなものですが、ブラウザは有効なメールアドレスのみを許可しようとします。
モバイルデバイスでは、メールキーボードが表示されます。
"number"
テキスト入力のようなものですが、ブラウザは有効な数値のみを許可しようとします。
モバイルデバイスでは、数値キーボードが表示されます。
"checkbox"
チェックされているかチェックされていないかの2つの状態のいずれかのみになり得るトグルチェックボックス。チェックボックスがチェックされている場合にのみ、値がフォームによって送信されます。
クリック領域を広げるために、チェックボックスをラベルでラップできます。
<label>
<input type="checkbox">
I accept the terms and conditions
</label>テキストをクリックすると、チェックボックスが切り替わることに注意してください。
"radio"
相互に排他的になるように、他のラジオボタンと組み合わせて使用する必要があります。
ラジオボタンは、類似のnameの値でリンクします。
<label>
<input type="radio" name="newsletter" value="yes">
Yes
</label>
<label>
<input type="radio" name="newsletter" value="no">
No
</label>一方をクリックすると、もう一方が選択解除されることに注目してください。
"submit"
クリック時またはEnterキー押下時にトリガーされる送信ボタンです。
name
フォーム内のその入力の一意の識別子を定義します。これにより、送信時にサーバーが各入力の値にアクセスできます。
必須。
「first_name」
nameの値は、<form>コンテナ内で一意である必要があります。
英数字a-z A-Z 0-9、および- _のような一部の特殊文字のみを含めることができます。スペースは含めることはできません。
プレースホルダー
入力が空の場合にのみ表示される、選択できないプレースホルダーテキストを定義します。
「例：[email protected]」
入力に期待される形式をヒントとして示すことができます。
ベストプラクティスとして、入力を説明するラベルを用意し、プレースホルダーを使用して例を示すことを推奨します。
<form>
<label>Email</label><br>
<input type="email" name="email" placeholder="e.g. [email protected]">
</form>フォーカスするとプレースホルダーが消えるため、別のラベルを保持する必要があることに注目してください。
必須
この入力が必須であることをブラウザに伝えます。空のままにすると警告が表示されます。
値は不要です。値なしでrequired属性を追加するだけで済みます。
<form>
<input type="text" required>
</form>テキスト入力が空のままフォームを送信しようとすると、ブラウザは警告を表示する必要があります。
disabled
入力を無効にします。
値は不要です。# legend
親コンテンツのキャプションを定義します。
例: コピー
<form action="/subscribe" method="post">
<fieldset>
<legend>Subscribe to the Newsletter</legend>
<input type="email" name="email">
<button>Ok</button>
</fieldset>
</form># textarea
Webフォーム内の複数行のテキストコントロールを定義します。
name
フォーム内のそのtextareaの一意の識別子を定義します。これにより、送信時にサーバーが各textareaの値にアクセスできます。
必須。
「message」
nameの値は、<form>コンテナ内で一意である必要があります。
英数字a-z A-Z 0-9、および- _のような一部の特殊文字のみを含めることができます。スペースは含めることはできません。
autocomplete
ブラウザがtextareaを自動補完できるかどうかを決定します。
"off"
ブラウザは自動補完機能を無効にします。
"on"
ブラウザは自動補完機能を有効にします。
minlength
textareaが有効であるために必要な最小文字数を定義します。
"15"
整数を使用できます。
maxlength
許可される最大文字数を定義します。
"140"
整数を使用できます。
プレースホルダー
textareaが空の場合にのみ表示される、選択できないプレースホルダーテキストを定義します。
「例：こんにちは、私の名前はアレックスです」
textareaに期待される形式をヒントとして示すことができます。
cols
列数を定義します。
"40"
整数を使用できます。
rows
行数を定義します。
"5"
整数を使用できます。
wrap
テキストをどのように折り返すかを定義します。
「hard」
テキストは常にcolsの値に応じて折り返されます。
「soft」
テキストは必要な場合にのみ改行されます。
disabled
textareaを無効にします。
値は不要です。
必須
このtextareaが必須であることをブラウザに伝えます。空のままにすると警告が表示されます。
値は不要です。
autofocus
Webページが読み込まれるときにtextareaにフォーカスを設定します。
値は不要です。
readonly
textareaを読み取り専用要素にします。
値は不要です。
spellcheck
ブラウザのスペルチェッカーを有効にします。
値は不要です。