スタイルシート

<style> label, input[type="checkbox"] { cursor: pointer; /* ラベルとチェックボックスのマウスカーソルをポインタ（指マーク）に変更 */ } textarea { vertical-align: top; /* ラベルの名前を上寄せにする */ height: calc( 1.3em * 5 ); /* テキストエリアの高さを行数で指定する */ line-height: 1.3; /* 行高さを指定する */ } </style>

HTML

<form action="sample.php" method="post"> <div> <label for="name">名前</label> <input type="text" id="name" name="name" placeholder="名前を入力" required autofocus> </div> <div> <label for="color_checkbox1"> <input type="checkbox" id="color_checkbox1" name="colors[]" value="white">白 </label> <label for="color_checkbox2"> <input type="checkbox" id="color_checkbox2" name="colors[]" value="black" checked>黒 </label> <label for="color_checkbox3"> <input type="checkbox" id="color_checkbox3" name="colors[]" value="red">赤 </label> </div> <div> <label for="pref">都道府県</label> <select id="pref" name="pref"> <option value="01">北海道</option> <option value="02" selected>青森県</option> <option value="03">岩手県</option> </select> </div> <div> <label for="comment">コメント</label> <textarea id="comment" name="comment" required></textarea> </div> <div> <button type="submit">登録</button> </div> </form>

form 内の特定のボタンのみデータの送信先を変更する（formaction 属性）

<form action="sample.php" method="post"> ----- ----- ----- <button type="submit">登録</button> <button type="submit" formaction="sample2.php">削除</button> </form>

form 要素の外側にある送信ボタンを使う（form 属性）

<form action="sample.php" method="post" id="form1"> ----- ----- ----- </form> <button type="submit" form="form1">送信</button>