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

Advertisements

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

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

  1. <form>タグ
  2. <input>タグ
  3. <textarea>タグ
  4. <select>タグ
  5. <label>タグ
  6. <button>タグ
  7. まとめ

1 <form>タグ

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


<form action="" method="post">
<!-- フォームの部品 -->
</form>
action属性入力したフォームのデータを送る送信先を指定。記述がない場合は、表示しているURLに送られます。
method属性入力したフォームのデータの送信方法を設定。値は、”get”(初期値)か”post”を選択できますが、個人情報が表示されてしまうのを防ぐため、基本post(データをURL以外で送信)を選択します。
enctype属性フォームが送信するデータの形式を指定します。通常指定は不要ですが、添付ファイルを送る機能をつける場合、enctype=”multipart/form-data”(データをマルチパートデータとして送信)を指定する必要があります。

2 <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」というデータが送信されます。
Advertisements

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>

3 <textarea>タグ

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


<textarea name="sample" rows="5" cols="33">
テキストフィールドの中身が入ります
</textarea>
rows 属性テキストの行数
cols 属性平均的な文字幅を基準にした文字数

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

Advertisements

4 <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>
multiple属性リストの複数の選択肢を選択することができます。
selected属性最初に開いた時の選択状態を指定することができます。

5 <label>タグ

フォームの部品と、その項目名を関連づけます。
2つを紐付けることで、<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>

6 <button>タグ

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


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

まとめ

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

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

Advertisements

Similar Posts