HTML
LINEでログイン
Googleでログイン
Twitterでログイン
問題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¥
補足
inputタグのtype属性に指定できる値は
今回登場した5種類以外にもいくつか用意されています。
ざっとご紹介すると、
search(検索キーワード)、tel、url、emai、button、
reset(初期状態に戻すボタン)、image(画像を使用したボタン)等があります。
inputタグに指定できる属性についても他にも便利なものがあるので
次の問題以降でも学んでいきましょう。
今回登場した5種類以外にもいくつか用意されています。
ざっとご紹介すると、
search(検索キーワード)、tel、url、emai、button、
reset(初期状態に戻すボタン)、image(画像を使用したボタン)等があります。
inputタグに指定できる属性についても他にも便利なものがあるので
次の問題以降でも学んでいきましょう。
完了にする！
活動記録をTweetする
ラジオボタンとチェックボックスの違いは
ラジオボタンは選択肢を1つしか選択できないことに対し
チェックボックスは複数選択ができるというところにあります。
パスワード入力欄は入力された文字が伏字で表示されます。
動作確認ができればOKです。