<body>内に入る要素の紹介part2です。
ここでは、HTMLのフォーム要素について簡単に紹介します。
フォームで入力し、送信したデータを取り扱いたい場合、サーバー側の言語(php、ruby等)の知識が必要になります。
また、入力したデータの送信前チェックをjavascriptで行ったり、firebase等に送信する等、実装の仕方は様々です。
ここではHTMLでのフォーム要素の実装に関してのみ紹介します。
フォーム <form>
このページで紹介する各フォーム要素を入れるためのコンテナです。
以下に紹介するフォーム要素を入れていきます。
action属性にフォームで送信したデータを処理するサーバー側のスクリプトを指定(指定がなければそのフォームの含まれているページ自身にデータが送信される)、
method属性にget又はpostのリクエストを指定します。
※getとpost
getとは
- URLの末尾にクエリパラメータを付けてリクエストを行う(データが丸見え)
- データが丸見えなのでパスワード等の秘匿性の高いデータを含めるのはNG
- 何らかの情報を検索、取得したりする時に使用する
postとは
- URLにはデータが追加されず、リクエスト本文にデータが含まれる
- ブログ記事の投稿、DBへのデータ追加や更新、メールフォーム等、サーバーへのデータ送信やリソースを更新する時に使用する
<form action="/contact" method="post">
<!-- ここに各フォーム要素を入れます -->
</form>ラベル <label>
<input>,<select>,<textarea>,<button>等の要素に、ラベルを紐つけます。アクセシビリティの観点から付けておくと良い。
各要素のid属性に任意のIDを指定し、<label>のfor属性に同じIDを指定することで紐つけを行います。
<label for="username">名前</label>
<input type="text" id="username">
<input>をラベル文字列とともにラップすると、for属性を指定しなくても紐付けが行われます。
<label>
<input type="checkbox">
チェック！
</label>文字等の入力 <input>
データの入力をすることができます。閉じタグはありません。
type属性の指定によりたくさんの使い方があります。
<label for="username">名前</label>
<input
type="text"
id="username"
name="username"
value="sample name"
placeholder="名前を入力してください"
>
<label for="requireinput">入力必須</label>
<input
type="text"
id="requireinput"
name="requireinput"
required
>
<label for="disableinput">入力不可</label>
<input
type="text"
id="disableinput"
name="disableinput"
disabled
>
<label for="check">チェック！</label>
<input type="checkbox" id="check">
<label for="black">black</label>
<input type="radio" id="black" name="radio" value="black">
<label for="white">white</label>
<input type="radio" id="white" name="radio" value="white" checked>
<label for="red">red</label>
<input type="radio" id="red" name="radio" value="red">
typeに何も指定しないとデフォルトでtextが入りますid属性には<label>と紐つけるため、<label>のfor属性と同じものを入れましょうname属性を指定すると、phpなどのサーバー側言語にて、このnameを指定してデータを取り出すことができますvalue属性に既定値を入れることができます- テキストを受け付けるタイプの場合、
placeholder属性を指定すると、テキストボックスが空の時にplaceholderで指定した文字列が表示されます required属性を指定するとその入力欄は、送信前に入力が必須となりますdisabled属性を指定すると入力欄がグレーアウトし、入力を受け付けなくなります
基本的には上記の通りですが、type属性を指定する事で、<input>の種類が変化します。多数の種類がありますが、よく使うものを紹介します。
type="text"
テキストボックス（初期値）type="tel"
電話番号の入力欄。スマホ等では電話番号用のテンキーが表示される。type="url"
URLの入力欄。対応しているブラウザでは入力した値がURLの形式となっているか検証されたりする。type="email"
メールアドレスの入力欄。対応しているブラウザでは入力した値がメールアドレスの形式となっているか検証されたりする。type="password"
入力値を黒い丸で隠すテキスト入力欄。type="date"
日付の入力欄。対応しているブラウザでは日付ピッカーが表示される。type="time"
時間の入力欄。type="number"
数値の入力欄type="checkbox"
チェックボックス。選択・未選択の値をとる。checked属性を記述すると、デフォルトで選択された状態となる。type="radio"
ラジオボタン。複数の<input type="radio">要素に同じname属性を指定して、選択肢の中から一つの値を選択できる。checked属性を記述すると、デフォルトで選択された状態となる。type="file"
ファイルピッカーを表示し、サーバーへ送信するファイルを選択できる。これを使用するときは、親の<form>にenctype="multipart/form-data"属性を追加する。type="submit"
フォームの送信ボタン。このボタンを押すと<form>内のデータを指定したサーバーに送信します。type="button"
ボタンを作成する。value属性に指定した値がボタンに表示され、<label>無しでOK。javascript等で動作を指定しなければ特に何もしない。これと似たものに<button>要素があるが、こちらはvalue属性を指定せずに子要素として文字列を指定できる。type="hidden"
画面上は表示されない隠しデータを指定する。ユーザーのデータ入力したタイムスタンプ等を追加で送るときなどに使用できる。
多すぎる…WEB制作でよく使うのはtype="text"、type="tel"、type="email"、type="checkbox"、type="radio"、type="submit"あたりです。
ドロップダウンリスト <select> <option>
<select>と<option>と組み合わせてドロップダウンリストを作成します。
<label for="fruit">果物</label>
<select name="fruit" id="fruit">
<option value="orange" disabled>オレンジ</option>
<option value="banana">バナナ</option>
<optgroup label="赤い果物">
<option value="apple" checked>リンゴ</option>
<option value="strawberry">イチゴ</option>
</optgroup>
</select>
<select>要素にname属性を指定すると、phpなどのサーバー側言語にて、このnameを指定してデータを取り出すことができます<option>要素のvalue属性には、サーバー側言語、javascript等にて使用するデータを指定します(下記例ではバナナをドロップダウンで指定すると"banana"が取り出せる)<optgroup>の子要素に<option>を入れておくと、項目をグループ化してラベル付けできる。ラベルは<optgroup>のlabel属性に指定します<select>要素にrequired属性を指定するとその入力欄は、送信前に入力が必須となります<select>または<option>にdisabled属性を指定すると入力欄、またはドロップダウンの項目がグレーアウトし、入力を受け付けなくなります
複数行のテキスト入力 <textarea>
ブログのコメント入力のような、複数行のテキスト入力欄です。
<label for="comment">コメント</label>
<textarea
id="comment"
name="comment"
rows="5"
cols="30"
>
コメントを入力してください
</textarea>id属性には<label>と紐つけるため、<label>のfor属性と同じものを入れましょうname属性を指定すると、phpなどのサーバー側言語にて、このnameを指定してデータを取り出すことができますrows属性にて行数を、cols属性にて列数を指定して、テキストボックスの大きさを決めることが出来ますvalue属性はなく、子要素に既定のテキストを入れることができますplaceholder属性を指定すると、テキストボックスが空の時にplaceholderで指定した文字列が表示されますrequired属性を指定するとその入力欄は、送信前に入力が必須となりますdisabled属性を指定すると入力欄がグレーアウトし、入力を受け付けなくなります
ボタン <button>
ボタンです。
<button type="button">
クリックしてね
</button>name属性を指定すると、phpなどのサーバー側言語にて、このnameを指定してデータを取り出すことができますvalue属性はなく、子要素に既定のテキストを入れることができ、<label>はなくてもOKdisabled属性を指定すると入力欄がグレーアウトし、入力を受け付けなくなりますtype="button"とすると、javscriptで動作を指定しない限り、何もしないただのボタンになりますtype="submit"とすると、フォームの送信ボタンになります
<fieldset> <legend>;
複数のフォーム要素(特にチェックボックス、ラジオボタン)を設置する場合に<fieldset>でそれらを纏めて囲い、全体のラベルとして<legend>を設置することができる。
<fieldset>
<legend>サイズ選択</legend>
<p>
<input type="radio" name="size" id="size_s" value="small">
<label for="size_s">小</label>
</p>
<p>
<input type="radio" name="size" id="size_m" value="medium">
<label for="size_m">中</label>
</p>
<p>
<input type="radio" name="size" id="size_l" value="large">
<label for="size_l">大</label>
</p>
</fieldset>疑似クラス
各フォーム要素には状態に応じて次のような疑似クラスが用意されている。
※疑似クラスとは要素にマウスポインターを重ねた状態の時(:hover)や、要素をクリックしてアクティブ状態になった時等(:active)、要素が特殊な状態になったときのみ適用されるクラス。この疑似クラスに対し、CSSでスタイルをあてる事で、要素の状態が変わったときにのみ見た目を変える事できる。
:required
対象の<input>,<select>,<textarea>要素にrequired属性が指定されているときに適用される。:valid
対象の<input>要素に入力されたデータを検証し、有効な場合を表す。データの検証方法は<input>のtypeやrequired属性が設定されているか等により異なる。:invbalid
対象の<input>要素に入力されたデータを検証し、無効な場合を表す。データの検証方法は<input>のtypeやrequired属性が設定されているか等により異なる。:disabled
アクティブにしたり、フォーカスのできる要素を表す。要素にdisabled属性が指定されているときに適用される。javascript等でこの状態を切り替えたりすることが多い。:enabled
アクティブにしたり、フォーカスのできない要素を表す。要素にdisabled属性が指定されていないときに適用される。javascript等でこの状態を切り替えたりすることが多い。:checked
チェックボックス<input type="checkbox">、ラジオボタン<input type="radio">、ドロップダウンの各項目<option>項目</option>要素が、チェック又は選択されている状態を表します
デフォルトのスタイルを外す
下記のスタイルを各フォーム要素に適用すると、ほとんどのスタイルを外し、自由にカスタマイズすることできる。
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;次の記事
<head>要素内にいれるものについて紹介します！
