4.3 テキストボックス

[作成] form.html
[フォルダ] webpage/ch04

<!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>
        </form>
    </body>
</html>

4.4 テキストエリア

[追記] form.html
[フォルダ] webpage/ch04

<!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>
        </form>
    </body>
</html>

4.5 ラジオボタン・チェックボックス

[追記] form.html
[フォルダ] webpage/ch04

<!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>
        </form>
    </body>
</html>

4.6 セレクトボックス

[追記] form.html
[フォルダ] webpage/ch04

<!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>
        </form>
    </body>
</html>

4.7 送信・リセットボタン

[追記] form.html
[フォルダ] webpage/ch04

<!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>

練習問題

[作成] form1.html
[フォルダ] webpage/ch04

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>フォームの練習問題</title>
    </head>
    <body>
        <h1>アンケート</h1>
        <form action="" method="POST">
            <p>①あなたのお名前を入力してください。</p>
            <p><input type="text" name="namae"></p>
            <p>②性別を選んでください。</p>
            <p>
                <input type="radio" name="gender" value="man">男
                <input type="radio" name="gender" value="woman">女
            </p>
            <p>③お住まいの地域を選択してください。</p>
            <p>
                <select name="city">
                    <option value="hokkaido">北海道</option>
                    <option value="tohoku">東北</option>
                    <option value="kanto">関東</option>
                    <option value="kansai">関西</option>
                    <option value="kyushu">九州</option>
                </select>
            </p>
            <p>④興味のあることを選択してください。（複数選択可）</p>
            <p>
                <input type="checkbox" name="hobby" value="jogging">ジョギング
                <input type="checkbox" name="hobby" value="soccer">サッカー
                <input type="checkbox" name="hobby" value="baseball">野球
                <input type="checkbox" name="hobby" value="swimming">水泳
            </p>
            <p>⑤記入が終わりましたら、送信ボタンをおしてください。</p>
            <input type="submit" value="送信">
            <input type="reset" value="やり直し">
        </form>
    </body>
</html>