【HTML】フォームを作る
HTMLでフォームを作ります。PHPなども絡んでくるところですが、とりあえずHTMLのみで組みます。
基本
formタグの中に、methodとactionを必ず付け加えます。
methodはやりたい動作に応じて帰る必要があります。
<form method="URI" action="送信方法"> </form>
1行テキストフォーム
1行のテキストフォームにはinputタグを使います。<input type="text" name="フォームの値の名前">
複数行フォーム
複数行にはtextareaタグを使います。<textarea name="フォームの名前" cols="文字数" rows="行数"></textarea>
ラジオボタン
一つだけ選べる複数の項目を作ります。inputタグの type属性を radio にします。この時に labelタグで囲うことで、テキストを押してもラジオボタンを押したことになります。<label><input type="radio" name="ラジオボタン群の名前" value="値"> テキスト</label>
チェックボックス
複数選べる項目を作ります。inputタグの type属性を checkbox にします。<label><input type="checkbox" name="チェックボックス群の名前" value="値">インターネット</label>
リストメニューから選ぶ
リストメニューから選べる項目を作ります。selectタグと optionタグを使います。optionタグで項目を作り、selectタグで囲います。<select name="リストの名前"><option value="値"> 値のテキスト</option></select>
送信ボタンを作る
フォームの内容をactionに送るための送信ボタンを作ります。inpuタグの type を submit にします。<input type="submit" name="submit" value=" 送信 ">
入力必須の項目を作る
入力必須の項目を作るには、各項目の属性に「required」を加えます。<input type="text" name="name" required>
テキストフォームに例文を入れておく
テキストフォームに例文を入れるために、各属性に「placeholder=""」を加えます。<input type="text" name="name" placeholder="田中さん" required>
ページを読み込んだ時からテキストフォームに入力できる状態にしておく
ページを読み込んだ時に、テキストフォームをクリックしなくても、最初から入力できる状態にしておきます。属性に「autofocus」を加えます<input type="text" name="name" autofocus placeholder="田中さん" required>
テキストフォーム例
ソース
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームの練習</title> </head> <body> <form method="post" action="outoput.php"> <table> <tr> <td>名前</td><td><input type="text" name="name" autofocus placeholder="田中さん" required></td> </tr> <tr> <td>電話番号</td><td><input type="tel" name="tel" placeholder="03123456" required></td> </tr> <tr> <td>備考</td><td><textarea name="note" cols="40" rows="5"></textarea></td> </tr> <tr> <td>性別</td> <td><label><input type="radio" name="gender" value="1"> 男性</label><label><input type="radio" name="gender" value="2"> 女性</label><label><input type="radio" name="sex" value="9"> 解答しない </label></td> </tr> <tr> <td>都道府県</td> <td><select name="pref"><option value="1"> 北海道 </option><option value="2"> 青森県 </option><option value="3"> 岩手県 </option><option value="47"> 沖縄県 </option></select></td> </tr> <tr> <td>趣味</td> <td> <label><input type="checkbox" name="hobby[]" value="1">インターネット</label> <label><input type="checkbox" name="hobby[]" value="2"> 読書</label> <label><input type="checkbox" name="hobby[]" value="3">ショッピング</label> <label><input type="checkbox" name="hobby[]" value="4">サイクリング</label> <label><input type="checkbox" name="hobby[]" value="5">音楽鑑賞</label> </td> </tr> <tr><td><input type="submit" name="submit" value=" 送信 "> </td></tr> </table> </form> </body> </html>