例
二つの異なる入力タイプを持つHTMLフォーム。 テキストと提出:
<form action="demo_form.asp">
Username: <input type="text" name="usrname"><br>
<input type="submit" value="Submit">
</form>
»それを自分で試してみてください 詳細以下の例「自分にそれを試してみてください」。
定義と使用法
type属性は、の種類を指定<input>に表示する要素を。
デフォルトのタイプは次のとおりです。 text 。
ヒント:これは必須の属性ではありませんが、我々はあなたが常にそれを含めるべきだと思います。
ブラウザのサポート
属性 | |||||
---|---|---|---|---|---|
type | はい | はい | はい | はい | はい |
注: type属性は、すべての主要なブラウザで動作します。 しかし、すべての異なる入力タイプは、すべての主要なブラウザで動作しません。
各入力タイプのブラウザのサポートを確認するには、 以下を見てください。
HTML 4.01とHTML5の違い
:HTML5は、次の新しい入力タイプがありcolor, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 、およびurl 。
構文
<input type="value">
属性値
値 | 説明 |
---|---|
button | (主にスクリプトをアクティブにするためにJavaScriptで使用される)クリッカブルボタンを定義します |
checkbox | チェックボックスを定義します |
color | カラーピッカーを定義します |
date | 日付のコントロールを定義します(年、月、日(時間がありません)) |
datetime | 入力datetime型は、HTMLの標準から削除されました。 代わりにdatetime型ローカルを使用してください。 |
datetime-local | 日時管理(年、月、日、時、分、秒、および秒(時間がないゾーン)の一部を規定します |
電子メールアドレスのフィールドを定義します | |
file | (ファイルのアップロード)ファイル選択フィールドと「参照...」ボタンを定義します |
hidden | 隠し入力フィールドを定義します |
image | 送信ボタンとして画像を定義します |
month | 月と年コントロールを定義します(タイムゾーンなし) |
number | 番号を入力するためのフィールドを定義します |
password | (文字がマスクされている)パスワードフィールドを定義します |
radio | ラジオボタンを定義します |
range | その正確な値(スライダーコントロールのように)重要ではありません番号を入力するためのコントロールを定義します |
reset | (デフォルト値にすべてのフォームの値をリセット)リセットボタンを定義します |
search | 検索文字列を入力するためのテキストフィールドを定義します |
submit | 送信ボタンを定義します |
tel | 電話番号を入力するためのフィールドを定義します |
text | デフォルト。 単一行のテキストフィールドを定義します(デフォルトの幅は20文字です) |
time | 時間を入力するためのコントロールを定義します(タイムゾーンなし) |
url | URLを入力するためのフィールドを定義します |
week | 週と年コントロールを定義します(タイムゾーンなし) |
例
入力タイプ: button
例
それがクリックされたときにはJavaScriptをアクティブにクリック可能なボタン、:
<input type="button" value="Click me" onclick="msg()">
»それを自分で試してみてください 入力タイプ: checkbox
例
チェックボックスは、ユーザーが選択肢の限られた数の1つまたは複数のオプションを選択してみましょう:
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
»それを自分で試してみてください 入力タイプ: color
例
カラーピッカーからカラーを選択します。
Select your favorite color: <input type="color" name="favcolor">
»それを自分で試してみてください 入力タイプ: date
入力タイプ: datetime
例
(タイムゾーン付き)、日付と時刻コントロールを定義します。
Birthday (date and time): <input type="datetime" name="bdaytime">
»それを自分で試してみてください 入力datetime型は、HTMLの標準から削除されました。 代わりにdatetime型ローカルを使用してください。
入力タイプ: datetime-local
例
日付と時刻コントロール(タイムゾーンなし)を定義します。
Birthday (date and time): <input type="datetime-local" name="bdaytime">
»それを自分で試してみてください 入力タイプ: email
例
(提出されたときに自動的に検証されます)、電子メールアドレスのフィールドを定義します。
E-mail: <input type="email" name="usremail">
»それを自分で試してみてください ヒント:iPhone上のSafariは、電子メールの種類を認識し、それに合わせて、オンスクリーンキーボードを変更(@や.COMのオプションが追加されます)。
入力タイプ: file
例
ファイル選択フィールドと(ファイルアップロード用)「参照」ボタンを定義します。
Select a file: <input type="file" name="img">
»それを自分で試してみてください 入力タイプ: hidden
例
(ユーザーには見えない)隠しフィールドを定義します。
隠しフィールドは、多くの場合、デフォルト値を格納する、またはその値には、JavaScriptによって変更されていることができます。
<input type="hidden" name="country" value="Norway">
»それを自分で試してみてください 入力タイプ: image
入力タイプ: month
例
月と年コントロール(タイムゾーンなし)を定義します。
Birthday (month and year): <input type="month" name="bdaymonth">
»それを自分で試してみてください 入力タイプ: number
例
(あなたも受け入れられているものの番号に制限を設定することができます)番号を入力するためのフィールドを定義します。
Quantity (between 1 and 5): <input type="number" name="quantity" min="1"
max="5">
»それを自分で試してみてください 使用しfollowing制限を指定する属性を:
入力タイプ: password
入力タイプ: radio
例
ラジオボタンは、ユーザーが選択肢の限られた数のうち1つだけを選択してみましょう:
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other">
Other
»それを自分で試してみてください 入力タイプ: range
例
その正確な値(スライダーコントロールなど)は重要ではありません番号を入力するためのコントロールを定義します。 また、数字が受け入れられるものに制限を設定することができます。
<input type="range" name="points" min="0" max="10">
»それを自分で試してみてください 使用しfollowing制限を指定する属性を:
入力タイプ: reset
ヒント:慎重にリセットボタンを使用してください!これは、誤ってリセットボタンをアクティブユーザーのために迷惑することができます。
入力タイプ: search
例
(サイト内検索、またはGoogle検索のような)検索フィールドを定義します。
Search Google: <input type="search" name="googlesearch">
»それを自分で試してみてください 入力タイプ: submit
入力タイプ: tel
入力タイプ: text
例
ユーザーがにテキストを入力できる2つの単一行のテキストフィールドを定義します。
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
»それを自分で試してみてください 入力タイプ: time
例
時間(タイムゾーンなし)を入力するためのコントロールを定義します。
Select a time: <input type="time" name="usr_time">
»それを自分で試してみてください 入力タイプ: url
ヒント:iPhone上のSafariは、URLの入力タイプを認識し、それに合わせて、オンスクリーンキーボードを変更(.COMオプションが追加されます)。