ログイン
問題11

formとinputで様々なフォームを作ってみよう

inputタグには様々な部品を構成するための値が用意されています。チェックボックスやラジオボタンなど、普段からよく見かけるフォーム部品の多くは、このinputタグで作成されています。

アイコン画像

問題11:formとinputで様々なフォームを作ってみよう

下記5種類のフォーム部品を形成してみましょう!

①ラジオボタン
②チェックボックス
③ファイルの添付ボタン
④パスワード入力欄
⑤日付の入力欄

エディターのアイコンあらかじめエディタに書くコード

                <form>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</form>
¥HTML¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <form>
  <ul>
    <li><input type="radio"></li>
    <li><input type="checkbox"></li>
    <li><input type="file"></li>
    <li><input type="password"></li>
    <li><input type="date"></li>
  </ul>
</form>
¥HTML¥
            

コメントのアイコン解説

指定方法については解答コードをご確認ください。

ラジオボタンとチェックボックスの違いは
ラジオボタンは選択肢を1つしか選択できないことに対し
チェックボックスは複数選択ができるというところにあります。

パスワード入力欄は入力された文字が伏字で表示されます。
動作確認ができればOKです。
ログインして解答を見る

コメントのアイコン補足

inputタグのtype属性に指定できる値は
今回登場した5種類以外にもいくつか用意されています。
ざっとご紹介すると、
search(検索キーワード)、tel、url、emai、button、
reset(初期状態に戻すボタン)、image(画像を使用したボタン)等があります。

inputタグに指定できる属性についても他にも便利なものがあるので
次の問題以降でも学んでいきましょう。
HTMLを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる