前回の記事でHTMLのフォームに関する勉強はできましたか?
今回も、前回の前回と同様に、HTMLのフォームに関する勉強なのですが、前回の記事があまりにも長くなりそうだったので、今回は前回の続きを書いていきます。
引き続きHTMLのフォームについて勉強して、理解を深めていきましょう!
file
・ファイル選択
<formaction="#" methed="post"enctype="multipart/form-data">
<inputtype="file"name="datafile">
</form>
・<form>タグに「enctype="multipart/form-data"」を指定すること
リスト
・メニュータイプの選択肢
<selectname="language">
<optionvalue=""selected>以下の言語を選択してください</option>
<optionvalue="1">日本語</option>
<optionvalue="2">英語</option>
<optionvalue="3">フランス語</option>
<optionvalue="4">スペイン語</option>
<optionvalue="5">韓国語</option>
</select>
・selected
・select要素にsize属性を設定すると、スクロールフィールドを表示します。
<selectsize="3"name="language">
<optionvalue="1"selected>日本語</option>
<optionvalue="2">英語</option>
<optionvalue="3">フランス語</option>
<optionvalue="4">スペイン語</option>
<optionvalue="5">韓国語</option>
</select>
お問い合わせフォーム
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>お問い合わせフォーム</title>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<formaction="#"method="post">
<p>名前:<inputtype="text"name="name"size="20"maxlength="10"value="お名前"></p>
<p>性別:
<inputtype="radio"name="sex"value="male"checked>男性
<inputtype="radio"name="sex"value="female">女性
</p>
<p>スマートフォン:
<inputtype="checkbox"name="mobile"value="1"checked>iphone
<inputtype="checkbox"name="mobile"value="2">Android
<inputtype="checkbox"name="mobile"value="3">その他
</p>
<p>言語:
<selectname="language">
<optionvalue=""selected></option>
<optionvalue="1">日本語</option>
<optionvalue="2">英語</option>
<optionvalue="3">フランス語</option>
<optionvalue="4">スペイン語</option>
<optionvalue="5">韓国語</option>
</select>
</p>
<p>内容:<textareaname="subject"rows="5"cols="40">お問い合わせ内容</textarea></p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>