テキストボックス

[作成] 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>
        

テキストエリア

[追記] form.html

[フォルダ] webpage/ch04

        <p>メッセージ:</p>
        <textarea name="message" rows="5" cols="40"></textarea>
        

ラジオボタン

[追記] form.html

[フォルダ] webpage/ch04

        <p>性別:
        男性<input type="radio" name="gender" value="man">
        女性<input type="radio" name="gender" value="woman">
        </p>
        

チェックボックス

[修正] form.html

[フォルダ] webpage/ch04

        <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.html

[フォルダ] webpage/ch04

        <p>今日の晩御飯:
        <select name="dinner">
        <option value="riceball">おにぎり</option>
        <option value="udon">うどん</option>
        <option value="ramen">ラーメン</option>
        <option value="soba">そば</option>
        </select>
        </p>
        

送信・リセットボタン

[追記] form.html

[フォルダ] webpage/ch04

        <input type="submit" value="送信">
        <input type="reset" value="やり直し">
        

練習問題

[作成] 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>