“input”要素~“form”属性

“form”属性について

“form”属性は“form”要素の外にある“input”要素を“form”要素と関連付ける属性です。

“form”属性の値には“input”要素を関連付ける“form”要素の“id”属性の値を指定します。同じ文書にある“form”要素であれば配置場所にかかわらず関連付けることができます。

“form”属性を省略した場合は“input”要素は祖先要素となる“form”要素に関連づけられます。

指定できる値

サンプルコード

<p>

あなたは猫が好きですか？：<label><input type="checkbox" name="cat" value="Yes" required form="sample-form">好き</label>

</p>

...

<form method="post" action="sample-inputtag7.php" target="_blank" id="sample-form">

<fieldset>

<legend>好きな果物</legend>
<p>

<label><input type="radio" name="fruit" value="甘蕉">甘蕉</label>
<label><input type="radio" name="fruit" value="林檎">林檎</label>
<label><input type="radio" name="fruit" value="甜瓜">甜瓜</label>
<label><input type="radio" name="fruit" value="苺">苺</label>
<label><input type="radio" name="fruit" value="桃">桃</label>

</p>

</fieldset>
<fieldset>

<legend>好きな野菜</legend>
<p>

<label><input type="radio" name="vege" value="南瓜">南瓜</label>
<label><input type="radio" name="vege" value="甘藍">甘藍</label>
<label><input type="radio" name="vege" value="甘藷">甘藷</label>
<label><input type="radio" name="vege" value="西瓜">西瓜</label>
<label><input type="radio" name="vege" value="茄子">茄子</label>

</p>

</fieldset>
<p><button type="submit">送信する</button></p>

</form>

あなたは猫が好きですか？：好き

...

好きな果物

甘蕉 林檎 甜瓜 苺 桃

好きな野菜

南瓜 甘藍 甘藷 西瓜 茄子

送信する