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

最終更新日:2018年03月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>
<keygen>要素は HTML5.2 で削除されました。
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>
<keygen>要素は HTML5.2 で削除されました。
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で整えましょう。
フォーム部品だけでは見づらいので、<p>要素、<span>要素などの 他のHTML要素と組み合わせて、CSSでレイアウトします。

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

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

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

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2023/09 | 10
- - - - - 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
Archive
Profile

yuki★hata

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

メールフォームはこちら

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