送信・リセットボタン
4.7 送信・リセットボタン
【ここで学ぶ内容】
- 送信ボタン・リセットボタン
<input type=”submit” value=”値”>
<input type=”reset” value=”値”>
送信・リセットボタン
フォームはほぼできあがりました。あとは、ユーザがフォームを埋めたらそのデータを送信するためのボタンを追加します。:送信ボタンを押すと、<form>と</form>で囲まれたフォームデータが、WEBサーバに送られます。リセットボタンを押すと、それまで入力したフォーム内容がクリアされます。
図 4.7.1 送信・リセットボタン
では、送信ボタンとリセットボタンを作っていきましょう。
1. ソースコードの記述
先ほど作成した[form.htmlのソースコードを、以下のように修正してください。
①ソース・フォルダー :webpage/ch04
②ファイル名 :form.html
➢ form.html
<input type="submit" value="送信"> <input type="reset" value="やり直し">
送信ボタン・リセットボタンでは、ボタン上に表示する文字列を、value属性で指定できます。今回の場合は、送信ボタンのvalue属性に「送信」、リセットボタンのvalue属性に「やり直し」と指定しました。
➢ form.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームの作成</title> </head> <body> <form action="" method="POST"> <p>名前:<input type="text" name="name"></p> <p>メッセージ:</p> <textarea name="message" rows="5" cols="40"></textarea> <p>性別: 男性<input type="radio" name="gender" value="man"> 女性<input type="radio" name="gender" value="woman"> </p> <p>好きな動物: 犬<input type="checkbox" name="animal" value="dog"> 猫<input type="checkbox" name="animal" value="cat"> 馬<input type="checkbox" name="animal" value="horse"> 猿<input type="checkbox" name="animal" value="monkey"> </p> <p>今日の晩御飯: <select name="dinner"> <option value="riceball">おにぎり</option> <option value="udon">うどん</option> <option value="ramen">ラーメン</option> <option value="soba">そば</option> </select> </p> <input type="submit" value="送信"> <input type="reset" value="やり直し"> </form> </body> </html>
2. ブラウザで確認
ソースコードの記述が終わったら、上書き保存をして、ブラウザで表示しましょう。
図 4.7.2
value属性で指定した「送信」、「やり直し」という文字が、ボタン上に表示されました。