[59] フォームの属性 逆引き一覧 (どの属性がどの部品に使えるか)

最終更新日:-0001年11月30日  (初回投稿日:2013年11月08日)

「 required属性って何に使えるんだっけ?」なんて時のために、
フォーム関連の属性を「どの属性がどの部品(要素)に使えるか」一覧にまとめました。

アルファベット順で並べています。

A C D E F H K L M N O P R S T V W

フォームの属性一覧

ブルーの属性は「HTML5 からの新属性」です。

属性 それを使用するフォームの部品
A
accept ファイルを受け取るとき、サーバが受付可能なMIMEタイプを指定 <input type=file>
accept-charset 送信時に使う文字コード <form>
action フォームの送信先のURL <form>
alt <input type=image>での画像の代替テキスト <input type=image>
autocomplete オートコンプリート(入力予測機能)のON, OFF <form> <input>

<form>が優先 = <form>でOFFなら<input>でONにしても無効

autofocus HTML文書のロード後すぐに、自動的にフォーカス(アクティブになる) <input> <textarea> <button>
<select> <keygen>
C
challenge 公開鍵と一緒に送るチャレンジ文字列 <keygen>
checked ラジオボタン、チェックボックスを「選択された状態」にする <input> (radio, checkbox のみ)
cols 1行の文字数(ボックス幅) <textarea>
D
dirname 文字の書式方向の送信に使う名前 <input><textarea>
disabled 使用不可にする <input><textarea><button>
<select> <option> <optgroup>
<fieldset> <keygen>
E
enctype 送信時のデータ形式をMIMEタイプで指定 <form>
F
for フォーム部品の id名を呼び出して関連づける <label> <output>
form フォーム部品を<form>の外に出し <form>要素のID名で関連づける <input><textarea><button>
<select> <fieldset> <label>
<output> <keygen>
formaction <form>のaction属性の指定を上書き <input type=submit>
<input type=image>
<button type=submit>
formenctype <form>のenctype属性の指定を上書き <input type=submit>
<input type=image>
<button type=submit>
formmethod <form>のmethod属性の指定を上書き <input type=submit>
<input type=image>
<button type=submit>
formnovalidate <form>のnovalidate属性の指定を上書き <input type=submit>
<input type=image>
<button type=submit>
formtarget <form>のtarget属性の指定を上書き <input type=submit>
<input type=image>
<button type=submit>
H
high 高い値の境界点 <meter>
height <input type=image>での画像の高さ <input type=image>
K
keytype 生成される鍵の種類(RSA) <keygen>
L
label 選択肢のグループ名、または選択肢として表示するテキスト <option> <optgroup>
<datalist>と併用する<option>
list <datalist>要素のID名と関連づけ、リストを表示する <input> (type=hidden, password,
checkbox, radio とプッシュボタン類
は使用不可)
low 低い値の境界点 <meter>
M
max 数値の最大値 <input type=datetime, datetime-
local, date, month, week, time>

<input type=number>
<input type=range>
<meter> <progress>
maxlength 最大文字数(それ以上は入力不可になる) <input>(type=text, search, tel, url,
email, password の場合のみ)

<textarea>
method フォーム内容の送信方法を、get または post で指定 <form>
min 数値の最小値 <input type=datetime, datetime-
local, date, month, week, time>

<input type=number>
<input type=range>
<meter>
multiple 複数入力できるようにする <input type=email>
<input type=file>
<select>
N
name フォーム部品に固有の名前を付ける <input><form>
<textarea><button>
<select><fieldset><output>
<keygen>
novalidate バリデーション(入力内容の妥当性のチェック)をオフにする <form>
O
optimum 最適な値 <meter>
P
pattern 正規表現を指定(指定以外の書き方ではアラートが出る) <input> (type=text, search, tel, url,
email, password の場合のみ)
placeholder 入力見本 <input> (type=text, search, tel, url,
email, password の場合のみ)

<textarea>
R
readonly 読み取り専用(リードオンリー)にする <input> (type=checkbox, radio,
range, color, file, submit, reset,
button, image, hidden では無効)

<textarea>
required 入力必須にする(入力せずに送信ボタンを押すとアラートが出る) <input> (type=range, color,
submit, reset, button, image,
hidden では使用不可)

<textarea><select>
rows 行数(ボックスの高さ) <textarea>
S
selected セレクトメニューで、選択肢の1つを最初から選択された状態で表示する <option>
size 1行のテキストフィールド、またはセレクトメニューの幅を文字数で指定 <input> (type=text, search, tel, url,
email, password の場合のみ)

<select>
src <input type=image>での画像のURL <input type=image>
step 数値の入力の間隔(ステップ) <input type=datetime, datetime-
local, date, month, week, time>

<input type=number>
<input type=range>
T
target 処理結果を表示するウィンドウ(またはフレーム) <form>
type フォーム部品のタイプ <input> <button>
V
value 初期値を指定 <input><button><option>
<meter> <progress>
W
width <input type=image>での画像の幅 <input type=image>
wrap 送信時に改行するかどうかを指定 <textarea>

次回予告

次回は、フォームをCSSで整えましょう。
フォーム部品だけでは見づらいので、他のHTML要素と組み合わせて、CSSでレイアウトします。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.