第6章 フォーム
Webサイトの問い合わせのフォームを作成しよう
homepage
# **フォーム** *** ## **1.input要素** ```<input type="">```タグはフォーム（```<form>～</form>```）を構成する様々な入力部品を作成する際に使用します。 + input要素の```type属性```も指定できます。```type属性```の初期値は```type="text"```です。 + ```type="text"```一行テキストボックスを作成します + ```type="tel"```電話番号の入力欄を作成します + ```type="email"```メールアドレスの入力欄を作成します + ```type="password"```パスワード入力欄を作成します + ```type="date"```日付の入力欄を作成します + ```type="range"```レンジの入力欄を作成します + ```type="checkbox"```チェックボックスを作成します + ```type="radio"```ラジオボタンを作成します + ```type="hidden"```隠しデータをサーバーに送信する際に使用します + ```type="submit"```送信ボタンを作成します + ```type="reset"```リセットボタンを作成します + ```type="button"```汎用ボタンを作成します + ```name属性```は、入力部品に名前をつけます。 + ```value属性```は、入力値を指定できます。 + ```size属性```は、表示文字数を指定します（1以上の正の整数）。 + ```maxlength属性```は、入力可能な最大文字数を指定します。 #### **例** [sample6-1.html] ``` 日付： <input type="date"><br> 名前： <input type="text" size="10"><br> email： <input type="email" value="123@123.com"><br> パスワード： <input type="password" value="12345"><br> 性別： <input name="sex" type="radio">男<input name="sex" type="radio">女<br> <input type="submit" value="送信"> <input type="reset" value="リセット"> ``` #### **実行結果** <!DOCTYPE html><html><head><title></title></head><body> 日付：<input type="date"><br> 名前：<input type="text" size="10"><br> email：<input type="email" value="123@123.com"><br> パスワード：<input type="password" value="12345"><br> 性別： <input name="sex" type="radio">男<input name="sex" type="radio">女<br> <input type="submit" value="送信"> <input type="reset" value="リセット"> <br><br></body></html> ## **2.```<select>```要素と```<textarea>```要素** ### **```<select>```要素** この```<select>```要素はドロップダウンリストを定義します。 ```<option>```要素が選択できるオプションを定義します。 #### **例** [sample6-2.html] ``` <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> ``` #### **実行結果** <!DOCTYPE html><html><head><title></title></head><body><select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option></select><br><br> </body></html> ### **```<textarea>```要素** この```<textarea>```要素は複数行の入力フィールド（テキスト領域）を定義します。 ```rows属性```は、テキスト領域に表示される行数を指定します。 ```cols属性```は、テキスト領域の表示幅を指定します。 #### **例** [sample6-3.html] ``` <textarea name="message" rows="10" cols="30"> One cat come one cat go two cat penpen. </textarea> ``` #### **実行結果** <textarea name="message" rows="10" cols="30"> One cat come one cat go two cat penpen. </textarea><br><br> ## **3.HTMLフォーム** HTMLフォームとは、ユーザとWeb サイトやアプリケーションとの対話の要となるもののひとつです。```<form>～</form>```タグ使用して、中に入る```<input>```要素などが一塊にみなされます。そして```action```属性と```method```属性を利用して、フォームに入力されたものをサーバに送信することができます。 + ```action```属性は、送信先URLを指定します。 + ```method```属性は```method```属性の値として指定できるのは以下の２種類です。 + get …… 送信内容がURLとして渡されます（初期値） + post …… 本文（本体）として送信されます + ```name```属性は、フォームの名前を指定します。 #### **例** [sample6-4.html] ``` <form action="xxxxx.php" method="post" name="sampleForm"> 名前：<input type="text" name="name" size="10"><br> パスワード：<input type="password"><br> 学年： <input type="radio" name="gakunen">１年生 <input type="radio" name="gakunen">２年生 <input type="radio" name="gakunen">３年生 <input type="radio" name="gakunen">４年生 <input type="radio" name="gakunen">５年生 <input type="radio" name="gakunen">６年生<br> 好きな課目： <input type="checkbox" name="kamoku">国語 <input type="checkbox" name="kamoku">英語 <input type="checkbox" name="kamoku">算数 <input type="checkbox" name="kamoku">理科 <input type="checkbox" name="kamoku">社会 <input type="checkbox" name="kamoku">体育<br> <input type="submit" value="送信"> <input type="reset" value="リセット"> </form> ``` #### **実行結果** <!DOCTYPE html> <html> <head> <title></title> </head> <body> <form action="xxxxx.php" method="post" name="sampleForm"> 名前：<input type="text" name="name" size="10" ><br> パスワード：<input type="password"><br> 学年： <input type="radio" name="gakunen">１年生 <input type="radio" name="gakunen">２年生 <input type="radio" name="gakunen">３年生 <input type="radio" name="gakunen">４年生 <input type="radio" name="gakunen">５年生 <input type="radio" name="gakunen">６年生<br> 好きな課目： <input type="checkbox" name="kamoku">国語 <input type="checkbox" name="kamoku">英語 <input type="checkbox" name="kamoku">算数 <input type="checkbox" name="kamoku">理科 <input type="checkbox" name="kamoku">社会 <input type="checkbox" name="kamoku">体育<br> <input type="submit" value="送信"> <input type="reset" value="リセット"> </form> </body> </html> *** >**練習** >> **問題**[ex6-1.html] ```<table>```を合わせて下記のフォームを作成しましょう。 <form method="POST" action="xxx.cgi"> <table border="1"> <tr> <td>名前：</td> <td><input type=text name="namae"></td> </tr> <tr> <td>パスワード：</td> <td><input type=password name="passwd"></td> </tr> <tr> <td>種族：</td> <td> <select> <option>人類</option> <option>宇宙人</option> <option>ウルトラマン</option> <option>怪獣</option> </select> </td> </tr> <tr> <td>性別：</td> <td> <input type=radio name="seibetsu" value="male" checked>男 <input type=radio name="seibetsu" value="female">女 </td> </tr> <tr> <td>趣味：</td> <td> <input type=checkbox name="shumi" value="PC">パソコン <input type=checkbox name="shumi" value="SP">スポーツ <input type=checkbox name="shumi" value="RD">読書 </td> </tr> <tr> <td></td> <td> <input type=submit value=" 送信 "> <input type=reset value=" 取消 "> </td> </tr> </table> </form> <!-- >>答え ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>練習</title> </head> <body> <form method="POST" action="xxx.cgi"> <table border="1"> <tr><td>名前：</td><td><input type=text name="namae"></td></tr> <tr><td>パスワード：</td><td><input type=password name="passwd"><td></tr> <tr><td>種族：</td><td> <select> <option>人類</option> <option>宇宙人</option> <option>ウルトラマン</option> <option>怪獣</option> </select> </td></tr> <tr><td>性別：</td><td> <input type=radio name="seibetsu" value="male" checked>男 <input type=radio name="seibetsu" value="female">女 </td></tr> <tr><td>趣味：</td><td> <input type=checkbox name="shumi" value="PC">パソコン <input type=checkbox name="shumi" value="SP">スポーツ <input type=checkbox name="shumi" value="RD">読書 </td></tr> <tr><td></td><td> <input type=submit value=" 送信 "> <input type=reset value=" 取消 "></td></tr> </table> </form> </body> </html> ``` -->
content
戻る
