フォームの各パーツのHTMLの書き方をまとめてみた

こんにちは、アツです!

みなさーん、プログラミングしていますか?
アツは昔、学生時代に、HPを作り始めた頃は、問い合わせフォームとか掲示板とかは他の業者からレンタルして借りていたんですね。あの頃が懐かしい。。。

なかなか問い合わせフォームとか掲示板とかの作成の機会は来ませんでしたが、このたび、故あって、PHPで問い合わせフォームを作ることになり、そのため、復習もあって、フォームの各パーツのHTMLの書き方についてまとめてみました。

フォームの各パーツのHTMLの書き方まとめ

フォーム全体 <form action=”” method=””>
/*フォームの内容をここに書きます*/
</form>
※action属性の値は入力情報を飛ばすURLを記載(必須)
※method属性の値はgetかpostだが、この場合はpostで。
getとしちゃうと、入力情報がURLに表示されてしまいます。
inputタグ <input type=”” value=””>が基本形。閉じタグなし。
type要素でその様態を変える。
送信ボタン <input type=”submit” value=”送信”>
または
<button type=”button” value=”送信”>送信ボタン</button>
※value属性はボタンに書かれる文字
buttonの場合、囲まれた文字がボタンに書かれる
リセットボタン <input type=”reset” value=”リセット”>
※value属性はボタンに書かれる文字
一行テキスト <input type=”text” value=””>
※value属性は初期値、つまり最初から書いてある文字を表します。
email記入欄 <input type=”email” value=””>
パスワード入力 <input type=”password” value=””>

※maxlength属性やminlength属性を追加して入力文字数の制限も可。

数入力 数を入力できる。
<input type=”number” value=””>
ラジオボタン 複数の選択肢から一つまたは複数を選ぶ「ラジオボタン」の追加
<input type=”radio” value=”男性”>男
<input type=”radio” value=”女性”>女※inputの部分はラジオボタンで、ラベルはその次に書く。
チェックボタン 複数の選択肢から一つを選ぶ「チェックボタン」の追加
<input type=”checkbox” value=”会社員”> 会社員
<input type=”checkbox” value=”学生”> 学生※inputの部分はチェックボタンで、ラベルはその次に書く。
画像選択 画像を選択できる。
<input type=”image” value=””>
ファイル選択 ファイルを選択できる。
<input type=”file” value=””>
複数行テキスト ※複数行を記入できる。
<textarea cols=”” rows=””></textarea>
※colsは文字数、rowsは行数をそれぞれ指定できる。
ドロップダウン <select name=””>
<option value=”sample_1″>以下から選択<option>
<option value=”sample_2″>りんご<option>
<option value=”sample_3″>みかん<option>
<option value=”sample_4″>ぶとう<option>
</select>※最初の文字が初めに現れる。上の場合「以下から選択」が見える。
※value属性は必ず指定しないと選択した情報が送られない。
囲む(グループ化) <fieldset>
<legend>ステータス</legend>
</fieldset>
ラベル(項目名) <label for=”name”>名前</label>
<input type=”text” name=”namae” id=”name”>
※html5の新しいタグ
※forは一緒に指定するフォームタグのnameと同じものを指定

input要素でよく使われる属性とその意味

type属性 フォームのパーツのタイプを決める。詳細は上記を参照。
name属性 それぞれのフォームのパーツの識別に利用される。したがって、重複する名前があってはならないのはidと同じ。nameは各要素の「送信用の」Idだと思えば良い。
value属性 初期値、つまり最初から入っているもの。
placehold属性 value属性と似ているが、たとえば「このように書いてください」などと、入力を始めるとクリアされる値。フォームをわかりやすくすることができる。
require属性 必ず入力してほしい項目のときに設定する。こうしておくと、書かれていないときに注意喚起ができる。
例)required=”true”というふうに使う。

まとめ

上記のいくつかをつかってフォームを作ってみました!参考までに!

結果はこちら。

書くときのポイント

  • 文末の改行は<br>。忘れるとそのまま続いてしまいます。
  • 初期状態はデザインがしょぼいです。。。。CSSでなんか装飾しましょう
  • textareaのラベルが下に行ってしまいますね。。。なんとかしましょう

次回は、このようなフォームをしっかり作り込みます!

2 件のコメント