第４章　フォーム

この章では、フォーム入力について説明します。

HOMEPAGE

フォーム

フォームとは入力欄や送信ボタンの集まりのことです。フォームに入力されたデータ（名前やプロフィール文、性別などの値）は、送信ボタンを押すことでデータが送信され、一定の処理が行われます。



<FORM>～</FORM>の間に、 <INPUT>・<SELECT>・ <TEXTAREA>等のタグにより、 一行テキストボックス・ボタン・チェックボックス・ラジオボタン・セレクトボックス・スクロールテキストボックス等の部品を配置します。

<html>
    <form action="/form.php" method="post">
        <!-- フォームの部品 -->
    </form>
</html>

<INPUT>タグはテキスト入力欄や実行ボタン等、 フォーム<FORM>～</FORM<）を構成する部品を作成するタグです。
type属性の値により、一行テキストボックス・チェックボックス・ラジオボタン・実行ボタン・リセットボタン等の部品となります。

例：[sample4-1.html]
日付：  <input type="date"><br>
名前：  <input type="text" size="10" value="yamada taro"><br>
email： <input type="email" value="google@gmail.com"><br>
パスワード：<input type="password" value="123456"><br>
性別：  <input name="sex" type="radio">男<input name="sex" type="radio"<女><br>
ファイル：<input type="file" name="file"><br>
<input type="checkbox" name="agree" value="体育">利用規約に同意する<br>
<input type="submit" value="送信"><input type="reset" value="リセット">
実行結果
日付：
名前：
email：
パスワード：
性別： 男女
ファイル：
利用規約に同意する

<textarea>は複数行の入力フィールドを作成するタグです
rows属性は、テキスト領域に表示される行数を指定します。
cols属性は、テキスト領域の表示幅を指定します。

例：[sample4-2.html]
ご感想：<br>
<textarea name="comment" rows="4" cols="40" placeholder="ここに感想を記入してください。"></textarea><br>
<input type="submit" value="送信"><input><br>type="reset" value="リセット">
実行結果
ご感想：


<SELECT>はセレクトボックスを作成するタグです。 セレクトボックス内の選択肢は<OPTION>タグで指定します。

例：[sample4-3.html]
<p>血液型：<br>
    <select name="blood">
        <option value="A">A型</option>
        <option value="B">B型</option>
        <option value="O">O型</option>
        <option value="AB">AB型</option>
    </select>
</p>
<p>星座：<br>
    <select name="horoscope" size="12">
        <option value="Aries">おひつじ座</option>
        <option value="Taurus">おうし座</option>
        <option value="Gemini">ふたご座</option>
        <option value="Cancer">かに座</option>
        <option value="Leo">しし座</option>
        <option value="Virgo">おとめ座</option>
        <option value="Libra">てんびん座</option>
        <option value="Scorpio">さそり座</option>
        <option value="Saggitarius">いて座</option>
        <option value="Capricorn">やぎ座</option>
        <option value="Aquarius">みずがめ座</option>
        <option value="Pisces">うお座</option>
    </select>
</p>
実行結果

血液型：

星座：

action属性と method属性を利用して、フォームに入力されたものをサーバに送信することができます。

例：[sample4-4.html]
<form action="http://google.com" method="post">
    名前：<input type="text" name="name" size="40"><br>
    性別：<input type="radio" name="sex" value="male">男<input type="radio" name="sex" value="female">女<br>
    血液型：<select name="blood">
        <option value="A">A型</option>
        <option value="B">B型</option>
        <option value="O">O型</option>
        <option value="AB">AB型</option>
    </select>
    ご感想：<br>
    <textarea name="comment" rows="4" cols="40"></textarea><br>
    <input type="submit" value="送信"><input type="reset" value="リセット">
</form>
実行結果
名前：
性別：男女
血液型： ご感想：



練習

問題 [Ex3_1.html]
テーブルと合わせて下記のフォームを作成してください。

お問い合わせフォーム

お名前
内容
性別男性　女性
スマートフォンiPhoneAndroidその他
地域
　 　　　　　　　　　

戻る