【HTML】【input】inputタグのtype一覧・基礎

こんにちは、たくじろう(@takujiro_0529)です。

今回はHTMLタグの<input>タグについての一覧を用意いたします。

ぜひご活用お願いいたします!

スポンサーリンク




概要

<input>タグは<form>タグ内で利用できます。

そしてテキストボックスなどの『部品』を構成するためのタグです。

部品の種類は『<input type=”***”>』のように『type』に指定します。

部品の種類(属性)

テキストボックス

1行のテキストボックスを作成します。


[html]
<form>
<input type="text">
</form>
[/html]

テキストボックス(パスワード)

テキストボックスに入力した値が『●』で表示される部品を作成します。


[html]
<form>
<input type="password">
</form>
[/html]

ラジオボックス

複数から一つしか選択できないラジオボックスを作成します。
※<input>タグのnameに同じ値を入れる必要があります。

選択肢A
選択肢B
選択肢C

[html]
<form>
<input type="radio" name="select">選択肢A
<input type="radio" name="select">選択肢B
<input type="radio" name="select">選択肢C
</form>
[/html]

チェックボックス

複数の項目からOR機能のチェックボックスを作成します。
まぁ、普通のチェックボックスです。
※こちらもラジオボックスと一緒で、チェックボックス同士に関係を持たせるために、nameに同じ値を入れます。

選択肢A
選択肢B
選択肢C

[html]
<form>
<input type="checkbox" name="select">選択肢A
<input type="checkbox" name="select">選択肢B
<input type="checkbox" name="select">選択肢C
</form>
[/html]

ファイル選択ボタン

ファイルを選択、設定することができるボタンを作成することができます。


[html]
<form>
<input type="file">
</form>
[/html]

送信ボタン(サブミットボタン)

サーバーにデータを送信することができるボタンを作成します。


[html]
<form>
<input type="submit" value="送信!">
</form>
[/html]

リセットボタン

サーバーにデータを送信することができるボタンを作成します。
※リセットボタンが機能するか確認できるように、テキストボックスとチェックボックスを実装しています。


test

[html]
<form>
<input type="text">
<input type="checkbox">test
<input type="reset" value="リセット!">
</form>
[/html]

隠しデータ(hidden)

ユーザーに見せないようなフラグなどを持たせるために利用します。


[html]
<form>
<input type="hidden" value="flg">
</form>
[/html]

普通のボタン(汎用ボタン)

はじめから意味をもたせていない、ボタンを作成することができます。


[html]
<form>
<input type="button" value="ぼたん">
</form>
[/html]

画像のボタン(imageボタン)

送信ボタンを画像に変更して作成することができます。


[html]
<form>
<input type="image" src="※ここに画像のディレクトリを記述します">
</form>
[/html]

スポンサーリンク

スポンサーリンク



シェアする

  • このエントリーをはてなブックマークに追加

フォローする