See the Pen
textarea by linlin (@linlin098765)
on CodePen.
<textarea cols="50" rows="5"></textarea>textareaタグは複数行のテキストを入力することが可能なフォームを作成するタグです。
See the Pen
select by linlin (@linlin098765)
on CodePen.
<p>
<label for="language">言語を選択：</label>
<select id="language" name="language">
<option value="e">英語</option>
<option value="d">その他</option>
<option value="j" selected>日本語</option>
</select>
</p>
<p>
<label for="contact">連絡方法（複数選択可）：</label>
<select id="contact" name="contact" multiple size="5">
<option value="email" selected>email</option>
<option value="tel" selected>tel</option>
<option value="fax" selected>fax</option>
<option value="postal" selected>郵便</option>
<option value="office">社員からの説明</option>
</select>
</p> optionタグは、selectタグのセレクトボックスやdatalistタグの入力候補となる選択肢を作成するタグです。
optionタグはselectタグとdatalistタグの子要素として選択肢を作成します。
value属性で値を入力する必要があります。
disabled属性を指定することで選択できないようにすることも可能です。
See the Pen
optgroup by linlin (@linlin098765)
on CodePen.
<select name="course">
<option selected>▼コースを選択してください</option>
<optgroup label="コース" disabled>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</optgroup>
</select> optgroupタグは、optionタグで作成する選択肢をグループ化することができるタグです。
optgroupの子要素としてoptionタグを使用するとグループ化されます。
label属性は必ず指定する必要があり、それがグループ名となります。
disabled属性をoptgroupタグに指定すると、そのグループの選択肢がまとめて選択できなくなります。個別選択肢を押下できないようにするには、個別のoptionタグにdisabled属性を指定してください。
See the Pen
datalist by linlin (@linlin098765)
on CodePen.
<input type="search" name="search" autocomplete="on" list="keywords">
<datalist id="keywords">
<option value="あ">
<option value="い">
<option value="う">
</datalist> datalistタグは、フォームの入力欄などで入力候補を表示させるタグです。
datalistタグの子要素にoptionタグを使用することで入力候補を作成可能です。
使用方法として、inputタグのlist属性とdatalistのidを一致させることにより入力候補を表示させることができます。
See the Pen
select by linlin (@linlin098765)
on CodePen.
<p>
<label for="language">言語を選択：</label>
<select id="language" name="language">
<option value="e">英語</option>
<option value="d">その他</option>
<option value="j" selected>日本語</option>
</select>
</p>
<p>
<label for="contact">連絡方法（複数選択可）：</label>
<select id="contact" name="contact" multiple size="5">
<option value="email" selected>email</option>
<option value="tel" selected>tel</option>
<option value="fax" selected>fax</option>
<option value="postal" selected>郵便</option>
<option value="office">社員からの説明</option>
</select>
</p> selectタグは、セレクトボックスを作成するタグです。
セレクトボックスはmultiple属性で指定しない限り、選択できる選択肢は１つになります。size属性で選択肢を一度に何個見せるか指定可能です。
See the Pen
button by linlin (@linlin098765)
on CodePen.
<button>ボタン</button> buttonタグは、buttonを作成するタグです。
buttonタグはtype属性を指定することにより、効力が変化します。
disabled属性をボタンに指定すると押下できない状態にすることができます。
See the Pen
input by linlin (@linlin098765)
on CodePen.
<form action="◯◯.php" method="post">
<input type="hidden" value="test" name="hidden">
<p>url:<input type="url" name="url"></p>
<p>tel:<input type="tel" name="tel"></p>
<p>serch:<input type="search" name="search"></p>
<p>image:<input type="image" name="image" src="◯◯.jpg" alt="テキスト"></p>
<p>file:<input type="file" name="file"></p>
<p>color:<input type="color" name="color"></p>
<p>range:<input type="range" name="range"></p>
<p>number:<input type="number" name="number"></p>
<p>datetime-local:<input type="datetime-local" name="datetime-local"></p>
<p>time:<input type="time" name="time"></p>
<p>week:<input type="week" name="week"></p>
<p>month:<input type="month" name="month"></p>
<p>date:<input type="date" name="date"></p>
<p>datetime:<input type="datetime" name="datetime"></p>
<p>password:<input type="password" name="password"></p>
<p>email:<input type="email" name="email"></p>
<p>ボタン:<input type="button" name="button" value="ボタン"></p>
</form> input type=”button”は、特に機能がないボタンを作成するタグです。
value属性でボタンに表示される名称を指定します。
通常、javascriptと併用して使用されることが多いタグです。
See the Pen
input by linlin (@linlin098765)
on CodePen.
<form action="◯◯.php" method="post">
<input type="hidden" value="test" name="hidden">
<p>url:<input type="url" name="url"></p>
<p>tel:<input type="tel" name="tel"></p>
<p>serch:<input type="search" name="search"></p>
<p>image:<input type="image" name="image" src="◯◯.jpg" alt="テキスト"></p>
<p>file:<input type="file" name="file"></p>
<p>color:<input type="color" name="color"></p>
<p>range:<input type="range" name="range"></p>
<p>number:<input type="number" name="number"></p>
<p>datetime-local:<input type="datetime-local" name="datetime-local"></p>
<p>time:<input type="time" name="time"></p>
<p>week:<input type="week" name="week"></p>
<p>month:<input type="month" name="month"></p>
<p>date:<input type="date" name="date"></p>
<p>datetime:<input type="datetime" name="datetime"></p>
<p>password:<input type="password" name="password"></p>
<p>email:<input type="email" name="email"></p>
<p>ボタン:<input type="button" name="button" value="ボタン"></p>
</form> input type=”image”は、画像のボタンを作成するタグです。
imgタグと同様にsrc属性でURLを指定し、altタグで代替テキストを指定する必要があります。
See the Pen
form by linlin (@linlin098765)
on CodePen.
<form action="◯◯.php" method="post">
<p><label>氏名：<input type="text" name="name" size="20"></label></p>
<p><label>血液型：
<select name="blood">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="O">O型</option>
<option value="AB">AB型</option>
</select>
</label></p>
<fieldset>
<legend>性別</legend>
<p><label><input type="radio" name="sex" value="male">男性</label></p>
<p><label><input type="radio" name="sex" value="female">女性</label></p>
</fieldset>
<fieldset>
<legend>習慣</legend>
<p><label><input type="checkbox" name="hobby" value="tre">筋トレ</label></p>
<p><label><input type="checkbox" name="hobby" value="reading">読書</label></p>
<p><label><input type="checkbox" name="hobby" value="music">音楽</label></p>
<p><label><input type="checkbox" name="hobby" value="travel">旅行</label></p>
</fieldset>
<p><label>その他：<br><textarea name="comments" rows="2" cols="40"></textarea></label></p>
<p><input type="submit" value="送信"><input type="reset" value="リセット"></p>
</form> input type=”submit”は、フォームの送信ボタンを作成するタグです。
value属性で送信ボタンに表示される名称を指定します。
See the Pen
input by linlin (@linlin098765)
on CodePen.
<form action="◯◯.php" method="post">
<input type="hidden" value="test" name="hidden">
<p>url:<input type="url" name="url"></p>
<p>tel:<input type="tel" name="tel"></p>
<p>serch:<input type="search" name="search"></p>
<p>image:<input type="image" name="image" src="◯◯.jpg" alt="テキスト"></p>
<p>file:<input type="file" name="file"></p>
<p>color:<input type="color" name="color"></p>
<p>range:<input type="range" name="range"></p>
<p>number:<input type="number" name="number"></p>
<p>datetime-local:<input type="datetime-local" name="datetime-local"></p>
<p>time:<input type="time" name="time"></p>
<p>week:<input type="week" name="week"></p>
<p>month:<input type="month" name="month"></p>
<p>date:<input type="date" name="date"></p>
<p>datetime:<input type="datetime" name="datetime"></p>
<p>password:<input type="password" name="password"></p>
<p>email:<input type="email" name="email"></p>
<p>ボタン:<input type="button" name="button" value="ボタン"></p>
</form> input type=”file”は、ファイルを選択・取得できるフォームを作成するタグです。
input type=”file”を使用した場合、formタグではmethod属性を「post」、enctype属性を「multipart/form-data」を指定しなければファイルの送信は出来ません。