[49-1] input要素でいろんな部品を作ろう (type属性の値一覧)

最終更新日:2016年06月30日  (初回投稿日:2013年03月15日)

今回からフォームの「部品」になる要素です。
まずは<input>要素。「input (インプット) 」はそのまんま「入力」という意味です。

ちなみに、<output>要素ってのも HTML5からできました。計算結果出力のための要素です。後日詳細。

使用する要素 <input>

<input>要素は内容を持たない (から) 要素 。終了を表す</input>は省略します。

<input>要素の type属性で、フォームの部品を作ります。
type以外の属性は、type属性で作った部品の機能を追加します。

inputの属性
※ブルーは新しい属性
一覧はこちら
type    
name value size
maxlength checked accept
src alt width
height readonly disabled
required placeholder autocomplete
pattern autofocus form
list multiple min
max step formaction
formmethod formnovalidate formtarget
foamenctype    

<input>は、type属性のを変えるだけで まったく違う部品 になるんです。
(type 属性の 値 は元々いっぱいありますが、HTML5でさらに増えました!)
そして上の表でもわかるように、type以外の属性 もたくさんありますね。
こっちもHTML5から ドカっと増えて (上の表のブルーの部分) 、新機能が増えました。

特に、HTML5から加わった バリデーション機能( 入力内容をチェックする)は画期的です。
チェックにひっかると、対応ブラウザのデフォルトで( JavaScript無しで)アラートが出ます。

でもそんなたくさん覚えられないので、この記事を <input>の type属性の値一覧 にし、
今後の記事の「インデックス」にしようと考えてます。
( 次回から <input> で作る部品を1つずつ取り上げ、その記事に ココからリンクできるようにする予定です )
さらに <input>要素で使うすべての属性 も一覧にまとめておきます。

input要素の「 type属性で作るフォーム部品」一覧

今後、記事を追加するたびに、この一覧にリンクを貼っていく予定。ここがインデックスになります。

部品のカテゴリー type属性の値 部品の役割
テキスト入力 type="text"(デフォルト) 1行のテキストフィールド
type="search"  new 検索キーワードの入力フィールド
type="tel"  new 電話番号
type="url"  new URL
type="email"  new メール
type="password" パスワード
日付や時刻の入力 type="datetime"  new 日時(タイムゾーン有)
type="datetime-local"  new 日時(タイムゾーン無)
type="date"  new
type="month"  new
type="week"  new
type="time"  new 時刻(タイムゾーン無)
数値の入力 type="number"  new 数値
type="range"  new スライダーで数値(割合)の選択
色の入力 type="color"  new 色の選択
選択ボタン type="checkbox" 複数選択のボタン
type="radio" 1つだけ選択のボタン
ファイル送信 type="file" 送信ファイルの選択
非表示データ type="hidden" 非表示データの送信
送信ボタンなど type="submit" 送信ボタン
type="reset" リセットボタン
type="button" 汎用のプッシュボタン
type="image" 画像を送信ボタンにする

<input>の属性一覧

type属性以外もけっこうあります。半分以上がHTML5から加わった属性です。

type="部品の種類"
上記をご覧ください。
name="部品の名前(任意のテキスト)"
受け取る側が各部品を見分けるための名前なので、必ずつけておきましょう。
「部品の名前=データ内容」というカタチでセットで送信されます。
<input type="tel" name="telNumber">
<!--この例なら、「telNumber = 入力されたテキストデータ」で送信されます-->
また、ラジオボタンやチェックボックスでは、複数の選択肢全部に同じ名前を付けてグループ化します。
<input type="radio" name="repeat" value="はじめて">はじめて
<input type="radio" name="repeat" value="2回目">2回目
<input type="radio" name="repeat" value="3回目以上">3回目以上
<!--この例で「2回目」を選んだら「repeat = 2回目」で送信されます-->
value="初期値 またはボタンのラベル(選択名)"
部品がテキストフィールドなら初期値として入力欄に表示されます。テキストが書き換えられればそれが value値になり、name属性とセットで送信されます。
また、ラジオボタンやチェックボックスでは、選択された値の名称となり、name属性とセットで送信されます。
送信やリセットボタンなどの場合はボタン上に表示されます。
<input type="text" name="code1" value="サンプル1">
<!--あらかじめ「サンプル1」と記入されたテキストフィールドになり、
ユーザがほかのテキストに書き換えれば、それが nameとセットで送信されます。-->
<input type="submit" value="送信"> <input type="reset" name="reset" value="リセット">
 <!--「送信」「リセット」と書かれたボタンが表示されます-->
size="テキストフィールドの幅(文字数)" maxlength="最大文字数"
size属性で、テキストフィールドの幅を文字数で指定します。
maxlengthで、最大文字数を指定すると、それ以上は入力できなくなります。
● type属性の値がテキスト入力用の「text, search, tel, url, email, password」の場合のみ。
<span>お名前 :</span>
<input type="text" name="name" size="20" maxlength="30"> 
checked(値は省略可能)
ボタンを選択された状態にします。 ● type属性の値が「radio」と「checkbox」の場合のみ。
<input type="radio" name="repeat" value="はじめて" checked>はじめて
<input type="radio" name="repeat" value="2回目">2回目
<input type="radio" name="repeat" value="3回目以上">3回目以上
accept="MIMEタイプ"
ファイルを受け取るとき、サーバが受付可能なMIMEタイプを指定します。
「,(カンマ)」で複数指定可能。● type属性の値が「file」の場合のみ。
<input type="file" name="img" accept="image/png", image/gif, image/jpeg>
src="画像のURL" alt="代替テキスト" width="幅" height="高さ"
type="image"のとき、使用する画像のURL、代替テキスト、幅、高さを指定します。
● type属性の値が「image」の場合のみ。
<input type="image" src="btn.gif" alt="送信" width="60" height="30">
readonly(または「readonly=""」「readonly="readonly"」 ) 
「読み取り専用(リードオンリー)」になり、テキストフィールドの入力はできなくなりますが、value値は送信されます。

ユーザに「読ませたいけど、あんまり変更して欲しくない」ときに使います。
例えば、ユーザが他の部品を選択した結果、値が決定している場合に、その部品は readonly にするとか。
または、入力画面 → 確認画面という流れで、確認画面では同じフォームを readonly で表示するなど。

● type属性の値が「 checkbox, radio, range, color, file, submit, reset, button, image, hidden 」では無効。
<select name="browser" readonly>
<option value="IE">IE</option>
<option value="Firefox">Firefox</option>
<option value="Chrome">Chrome</option>
</select>
disabled(または「disabled=""」「disabled="disabled"」 ) 
「使用不可」になります。入力も選択もできない状態で、value値も送信されません。

これは送信して欲しくない部品に使います。
例えば、「ただいま製造中」の売り切れ商品の選択ボタンなどを disabled にしておくなど。
また、他の入力が済むまで送信ボタンを disabled にしておくとか。

<input type="submit" value="送信" disabled>
●これ以降は、HTML5からの新しい属性です。
required(または「required=""」「required="required"」 )  new
「入力必須」になります。入力せずに送信ボタンを押すとアラートが出ます。
● type属性の値が「range, color, submit, reset, button, image, hidden」のときは使えません。
<input type="tel" required>
placeholder="入力見本のテキスト"  new
入力見本を入れられます。「value属性」との違いは、ビジタが記入を始めると消去されること。そのまま流用することなく、単なる見本として表示されます。
● type属性の値がテキスト入力用の「text, search, tel, url, email, password」のときのみ使えます。
<input type="tel" placeholder=”00-0000-0000”>
autocomplete="on または off"  new
「オートコンプリート(履歴から入力予測して自動補完する)」のオン、オフ。
デフォルトはオン。ということは、オフにしたいときのみ使う属性ですね。
●<form>要素でオフにしていたら、こっち(<input>などの子要素)でオンにしてもムリ(親が優勢)
<input type="tel" autocomplete="off">
pattern ="正規表現"  new
「正規表現」を指定。JavaScriptの正規表現で書きます。指定した以外の書き方をしたらアラートが出ます。title属性で書き方を指示してあげるのが親切。
※「正規表記」については下記に詳細
●type属性の値がテキスト入力用の「text, search, tel, url, email, password」のときのみ使えます。
<input type="text" pattern="\d{3}-?\d{4}" title=" 3桁(ハイフン)4桁 で入力してください。">
autofocus(または「autofocus=""」「autofocus="autofocus"」 )  new
HTML文書のロード後すぐに、この属性のある要素が自動的にフォーカスされます。
● autofocus属性は、1つのHTML文書に1つだけ。(そりゃそうだ!)
<input type="tel" autofocus>
form="<form>要素のID"  new
form属性で<form>要素につけたIDを呼び出して関連づけます。
これによって<input>要素が<form>要素の外に出ていても機能します。
<input type="text" form="ex1">
<form method="post" action="sample.cgi" id="ex1">
<input type="submit" value="送信する">
</form>

「form属性」については、
「[47] form要素でデータ送信可能なフォームである事を示そう」の「HTML5からの変更点」もご覧ください。

list="<datalist>要素のID"  new
list属性で<datalist>要素につけたIDを呼び出して関連づけます。
これによって<datalist>要素の内容が、ダブルクリックなどで入力欄にリストで現れ、入力がラクになります。<datalist>要素については後日詳細。
● type属性の値が「hidden, password, checkbox, radio」とその他のボタン類のときは使えません。
<input type="text" list="codeType">
<datalist id="codeType">
<option value="リスト内容1"></option>
<option value="リスト内容2"></option>
<option value="リスト内容3"></option>
</datalist>
multiple(または「multiple=""」「multiple="multiple"」 )  new
複数の値を入力できるようになります。
● type属性の値が「email」と「file」のときだけ使えます。
<input type="file" multiple>
dirname="文字の書式方向の送信に使う名前(任意のテキスト)"
この名前と「入力内容の書字方向(ltr または rtl)」がセットで送信される。
(自動判別されて送信される)
下記の場合は「text=Hello&exampleDir=ltr」と送信される。
アラビア語のような「右から左」の書式の場合は、末尾が「=rtl」となる。
<input type="text" name="text" dirname="exampleDir" value="Hello">
min="最小値" max="最大値"  new
min属性は入力可能な最小値を、max属性は最大値を指定します。
最小値未満の数値や、最大値より大きい数値は入力できないようになります。
● type属性の値が「datetime, datetime-local, date, month, week, time, number, range」のときだけ使えます。
<input type="number" min="1" max="20">
step="ステップ値"  new
step属性は入力値の間隔(ステップ)を指定します。
● type属性の値が「datetime, datetime-local, date, month, week, time, number, range」のときだけ使えます。
<input type="number" min="0" max="20" step="5">
<input type="number" min="0" max="20" step="any">
<!--「any」を指定すれば制限無し(ステップは設定されない)-->
<input type="datetime" step="7200">
<!--type="datetime"では、1秒単位のステップ。上記は7200秒=2時間ずつ-->
formmethod="post または get(HTTPメソッド)"  new
formaction="URL"  new
formtarget ="_blank"(または _self _parent _top ウィンドウ(フレーム)名)  new
formnovalidate(または「novalidate=""」「novalidate="novalidate"」 )  new
foamenctype="送信時のデータ形式(MIMEタイプ)"  new
これらはすべて<form>要素での設定を上書きします。
● type属性の値が「submit」と「image」のときだけ使えます。 送信ボタンにだけ使えるってことね。
<form method="post" action="ex1.cgi" target="_top">
<input type="submit" value="送信" formmethod="get" formaction="ex2.cgi" formtarget="_self" 
formnovalidate>
</form>
<!-- enctype属性は、method="post" のときだけ使えます-->
<form method="post" action="ex3.cgi" enctype="multipart/form-data">
<input type="submit" value="送信する" formenctype="application/x-www-form-urlencoded">
</form>
このほかグローバル属性も使います
当然ながら、id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。

おまけ:正規表記のサンプル

正規表記(regular expression = RegExp)は、文字の種類(数字, テキスト(大文字, 小文字) )の組み合わせのパターンを作って、マッチングさせる(合ってるかどうか確認する)ためのモノ。

「pattern属性」でよく使いそうな正規表現のサンプルをメモ。

パターン 正規表現 意味
tel \d{1,5}-\d{1,4}-\d{4,5} 1〜5桁の数字 - (ハイフン) 1〜4桁の数字 - 4〜5桁の数字
url https?://\S+ httpにsがついてもOK :// ホワイトスペース以外の文字繰返し
email .+@.+\..+ 文字 @ 文字 .(ドット) 文字
password ^[0-9A-Za-z]+$ アルファベットと数字の繰り返し
郵便番号 \d{3}-?\d{4} 数字を3桁 - (ハイフン)がついてもOK 数字を4桁

正規表記の文法をざっとメモ。

文字 意味
\d 数字 ( [0-9]と同じ)(\D は数字以外の文字)
\S 「\s」以外の1文字
(\s はスペース,タブ,改行,改ページを含む1文字のホワイトスペース文字)
{n,m}(nとmは整数) 直前の文字が最小n回、最大m回
? 直前の文字が0回か1回 ({0,1}と同じ)
.(ドット、小数点) 改行文字以外の1文字
+ 直前の文字の1回以上の繰り返し
\(バックスラッシュ) 直後の1文字の特殊文字をエスケープ
(\. だと特殊文字「.」をただの文字としてのドットにするってこと)
[A-Z] 大文字 ([a-z]は小文字、[A-Za-z]はアルファベット)
[A-Za-z0-9] アルファベットと数字
^ 入力の最初
$ 入力の末尾
{n}(nは整数) 直前の文字がn回だけ

JavaScriptの正規表記については、下記を参考にしました。
Mozilla Developer Network「正規表現 - JavaScript」
Wikibooks「JavaScript 標準ライブラリ RegExp」

HTML5のフォームサンプル

<input>要素のバリデーション機能は、サンプルで見ると一目瞭然です。
何も入力せずに「注文する」ボタンを押してみてください。「お名前」の入力欄にアラートが出てきます。(対応ブラウザで見てね)

クリックするとサンプルHTMLで見られます。
Sample46_HTML5のフォーム (サンプル)

HTML5からの新要素は、今は Operaほぼ対応しているようです。Chromeもまあまあ検討。
また、IE10 onWin8 も対応しているそうです。
Firefoxは、部分的に対応。
Safari は、これからってかんじ。
(2013年3月記)

次回予告

<input>要素は、フォームの部品の中で一番よく使う要素。
部品になる要素は、他に <textarea> <select> <button> などがあるけど、
正直、input 要素だけでフォーム部品は作れるぜってくらい、多種多様な部品を作ることができます。
ですのでこれから当分、<input>要素が続きます。

さて次回からいよいよ具体的に<input>要素でフォームの部品を作っていきます。
まずは、テキスト入力に関する部品を作ってみましょう。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

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

yuki★hata

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

メールフォームはこちら

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