webフォームで使うHTMLや、その属性についてのまとめ

ほかのHTMLタグと比べると複雑な印象のある入力フォームで、
フォームの部品をつくるのに使われるタグと、
それぞれのタグでよく使われる属性について、改めてまとめてみました。

フォームで必須&よく使われるHTMLタグの
<form>,<input>,<textarea>,<select>,<label>,<button>の6つを順番に深めていきます。

<form>タグ

フォームを作成する際に、<form>〜</form>タグでかこみます。
フォームの部品(テキストボックスやボタン、チェックボックス等)となる部分を
<form>タグの中に配置します。

<form action="" method="post">
<!-- フォームの部品 -->
</form>

<input>タグ

フォームの部品をつくります(テキストボックスやチェックボックス等)。
終了タグは不要です。
属性はたくさんあるみたいですが、使いそうな種類をメモしました。

1. inputタグにcssの疑似要素は使えません。
2. CSSでは、input[type=”checkbox”]{ 〜 }などと指定します。

Type属性

inputタグの形式を指定。デフォルトの初期値はtype=”text”ですが、
type属性を指定すると、それぞれに合わせた入力欄になり、使いやすくなります。

<!--一行のテキストボックス-->
<input type="text" name="sample">

<!--電話番号-->
<input type="tel" name="tel">

<!--メールアドレス-->
<input type="email" name="email">

<!--ラジオボタン(1つだけ選択が可能)-->
<!--checkedで、最初から選択しておくことができる。-->
<input type="radio" name="pets" value="1" checked>うさぎ
<input type="radio" name="pets" value="2">いぬ

<!--チェックボックス(複数選択が可能)-->
<input type=checkbox name="pets" value="1"  checked>うさぎ
<input type=checkbox name="pets" value="2">いぬ
<input type=checkbox name="pets" value="3">ねこ

<!--ファイル選択(acceptは選択できるファイルの型を指定)-->
<input type="file"  name="filedata" accept=".jpg, .jpeg, .png">

<!--パスワード-->
<input type="password"　name="password" >

<!--検索テキストの入力欄-->
<input type="search" name="q" >

<!--送信ボタン-->
<input type="submit" value="送信する">

Name属性

フォームの入力欄の名前です。任意の名前をつけることができ、
書いておくとそれぞれの区別がつきやすいのと、データ送信時に一緒に送られます。
(javascriptなどでも参照できるようなので、半角英数字の名前が無難そう)

Value属性

フォームの値のことです。name属性と一緒に使われるケースが多いです。
送信される値の初期値になります。

<!-- #ffffffが初期値として表示される -->
<input type="color" value="#ffffff">

1. input type=”checkbox” の時、デフォルトのvalue属性の値は「 on」 になります。
2. value属性を書いてない場合、「name属性名=on」というデータが送信されます。

Placeholder属性

入力見本が入ります。password, search, tel, text, urlの時に使用可能です。
value属性との違いは、value属性だと値の初期値になりますが、
placeholderの場合は、フォームへの入力を促すための入力例です。

<input type="tel" placeholder=”00-0000-0000”>

Required属性

加えると項目の入力が必須になります。

<input type="tel" required>

Minlength / Maxlength属性

password, search, tel, text, urlの時に使用します。
maxlength属性で最大の文字数、minlength属性で最小の文字数を指定します。

Size属性

email, password, tel, textの時に使用します。
入力内容をどれだけ表示するかを指定します。

<input type="text" name="sample" required
minlength="4" maxlength="8" size="10">

1. password やtextの時は、初期値が20になっています。
2. cssの幅の指定があれば、そちらが優先されます。

Disabled属性

入力や選択ができなくなり、値も送信されなくなります。

<input type="text" placeholder="名前" disabled>

<textarea>タグ

複数行の入力欄です。value属性は使えません。

<textarea name="sample" rows="5" cols="33">
テキストフィールドの中身が入ります
</textarea>

rowsとcolsでの大きさを指定する(文字数の制限するのとは異なる)ことで、
ブラウザごとのデフォルトが違っても、より一貫性を持たせやすくなります。

<select>タグ

セレクトボックスを作成します。
<option>タグが選択肢です。
送信するときに、選択したvalue属性の値が一緒に送られます。
(value属性がない場合は、デフォルトで<option>の中身の値が送られます)

<select name="pets" multiple>
<!-- 例えば、うさぎを選ぶと「ペット1」の値が送信される -->
<option value="" selected>---</option>
<option value="ペット1">うさぎ</option>
<option value="ペット2">いぬ</option>
<option value="ペット3">ねこ</option>
</select>

<label>タグ

フォームの部品と、その項目名を関連づけます。
２つを紐付けることで、<label>の箇所をクリックしても、
フォーム入力欄をクリックして選んだときと同じ動作になり、
例えば狭い画面でもタップがしやすくなります。

2つの記入方法

1 <label>〜</label>で挟む

<label>アドレス
<input type="email" name="email">
</label>

2 <label>のfor属性の値＝フォーム部品のid属性の値にする

<label for="username">名前</label>
<input type="tet" name="name" id="username">

チェックボックスなど、ほかの箇所で使うときの例はこちら↓です。

チェックボックスに<label>をつけるとき

<div>
<input type="checkbox" id="check1" name="A" value="grape" checked>
<label for="check1">grape</label>
</div>
<div>
<input type="checkbox" id="check2" name="A" value="apple">
<label for="check2">apple</label>
</div>

セレクトボックスに<label>をつけるとき

<label for="fruit-label" class="form__title">FRUIT</label>
<select id="fruit-label" name="fruit">
<option value=""　selected>-----</option>　
<option value="grape">grape</option>
<option value="orange">orange</option>
<option value="peach">peach</option>
</select>

<button>タグ

ボタンを作成します。
<input type=’submit’ value=’送信’>のタグだと擬似要素が使えず、加工がしにくいので、
送信ボタンには、cssで調整をしやすい<button>を使うことが勧められています。

<button type="submit"  value="send">送信</button>

まとめ

特に<input>タグの中の種類は色々あるので、全ては覚えるのは難しいのですが、
フォームで使われる種類は限られているので、使っていくうちに深めてゆけたらと思います。

最後までご覧いただきありがとうございました！