投稿本文の基本機能とHTML要素

form

form 要素は、データの送信に使われます。
ワードプレスの投稿本文で、直接フォーム要素を記述する事はあまりないでしょう。
ただ、フォーム要素 checkbox 等では、チェックボックスがチェックされているかどうかを、CSSで受け取ることが出来るため、イベントスイッチとして使われることもあります。

CSS イベント

表示例




<form action="" method="post">
	<label id="label1" for="sample1">label text</label>
	<input id="sample1" type="text" />
	<label id="label0" for="sample0">label text</label>
	<input id="sample0" name="sample1" type="text" value="form" />
</form>

fieldset legend フィールドセット

fieldset


<form action="" method="post">
	<fieldset>
		<legend>fieldset</legend>
		<label id="label0" for="sample0">label text</label>
		<input id="sample999" name="sample1" type="text" value="form" />
	</fieldset>
</form>

form input type=radio ラジオボタンフィールド

グループ1(xhtml)


グループ2(html5)


<form action="basic.html" method="post">
	<fieldset>
		<legend>グループ1(xhtml)</legend>
		<input id="sample2" checked="checked" name="sex" type="radio" value="Male" />
		<label for="sample2">Male</label>
		<input id="sample3" name="sex" type="radio" value="Female" />
		<label for="sample3">Female</label>
	</fieldset>
	<fieldset>
		<legend>グループ2(html5)</legend>
		<input id="sample4" checked="checked" name="sexb" type="radio" value="Male" />
		<label for="sample4">Male</label>
		<input id="sample5" name="sexb" type="radio" value="Female" />
		<label for="sample5">Female</label>
	</fieldset>
</form>

form type=”checkbox” チェックボックスフィールド

グループ2(html5)


<form action="basic.html" method="post">
	<fieldset>
		<legend>グループ2(html5)</legend>
		<input id="sample6" name="sexc" type="checkbox" value="Male" />
		<label for="sample6">Male</label>
		<input id="sample7" name="sexc" type="checkbox" value="Female" />
		<label for="sample7">Female</label>
	</fieldset>
</form>

FORM SELECT NAME=”SAMPLE1″ SIZE=”3″ MULTIPLE 複数選択可能なセレクトボックス

グループ




<form action="" method="post">
	<fieldset>
		<legend>グループ</legend>
		<label for="select-group1">group1</label>
		<select id="select-group1" multiple="multiple" name="sample1" size="3">
			<optgroup label="group1">
				<option selected="selected" value="sample1">サンプル</option>
				<option value="sample2">sample2</option>
				<option value="sample3">sample3</option>
				<option value="sample4">sample4</option>
				<option value="sample5">sample5</option>
			</optgroup>
		</select>
		<label for="select-group2">group2</label>
		<select multiple="multiple" name="sample2" size="3">
			<optgroup label="group2">
				<option selected="selected" value="sample1">サンプル</option>
				<option value="sample2">sample2</option>
				<option value="sample3">sample3</option>
			</optgroup>
		</select>
		<label for="select-group3">group3</label>
		<select multiple="multiple" name="sample2" size="3">
			<optgroup label="group3">
				<option value="sample4">sample4</option>
				<option value="sample5">sample5</option>
			</optgroup>
		</select>
	</fieldset>
</form>

form type=”submit” type=”reset” リセットボタン


html4

<form action="basic.html" method="post">
	<input type="submit" value="サンプル" />
	html4
	<input accesskey="y" type="submit" value="abc" />
	<input accesskey="z" type="reset" value="リセット" />
</form>

form type=”password” name=”pass” size=”30″ maxlength=”30″ パスワードフィールド



html4

<form action="basic.html" method="post">
	<input id="sample8" maxlength="30" name="pass" type="password" />
	<label for="sample8">Password</label>
	html4
	<input id="sample9" accesskey="w" maxlength="30" name="pass" type="password" />
	<label for="sample9">Password</label>
</form>

form type=”file” name=”sample” size=”30″ ファイル選択フィールド


<form action="basic.html" method="post">
	<input id="sample10" accesskey="x" name="sample" type="file" />
	<label for="sample10">File</label>
</form>

form textarea wrap=”hard” テキストエリア


<form action="basic.html" method="post">
	<label for="sample12">Textarea</label>
	<textarea id="sample12" accesskey="v" cols="50" name="message" rows="5">strong ABCD abcd えいびぃしぃでぃ 瑛美市出</textarea>
</form>

ソース

関連


一覧に戻る

1 2 3 4 5 6 7 8 9 10 11


コメントは受け付けていません。