問題

11
HTML

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

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

HTMLの問題に挑戦しよう!

問題

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

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

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

あらかじめエディタに書くコード

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

期待する画面

解答の画像

解答と解説(formとinputで様々なフォームを作ってみよう)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

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

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

パスワード入力欄は入力された文字が伏字で表示されます。
動作確認ができればOKです。

補足

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

inputタグに指定できる属性についても他にも便利なものがあるので
次の問題以降でも学んでいきましょう。

さらにスキルアップしたい方は公式LINEから「HTML」と送信すると動画が見れます。

LINE登録して動画を視聴する
学習の事・キャリアの事、何でもOK!無料相談に申し込む