HTMLの勉強|Webサイト作りの基礎

初心者向けの向けのHTMLの勉強の仕方を綴っていきます。かくいう私もWebサイト作りの初心者です笑

HTMLのフォームについての勉強 part2

前回の記事で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>

 

お問い合わせフォーム

<!DOCTYPE html>
<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>