最新のWeb開発のチュートリアル
 

HTML <input> type Attribute

<HTML <input>タグ

二つの異なる入力タイプを持つ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 日時管理(年、月、日、時、分、秒、および秒(時間がないゾーン)の一部を規定します
email 電子メールアドレスのフィールドを定義します
file (ファイルのアップロード)ファイル選択フィールドと「参照...」ボタンを定義します
hidden 隠し入力フィールドを定義します
image 送信ボタンとして画像を定義します
month 月と年コントロールを定義します(タイムゾーンなし)
number 番号を入力するためのフィールドを定義します
password (文字がマスクされている)パスワードフィールドを定義します
radio ラジオボタンを定義します
range その正確な値(スライダーコントロールのように)重要ではありません番号を入力するためのコントロールを定義します
reset (デフォルト値にすべてのフォームの値をリセット)リセットボタンを定義します
search 検索文字列を入力するためのテキストフィールドを定義します
submit 送信ボタンを定義します
tel 電話番号を入力するためのフィールドを定義します
text デフォルト。 単一行のテキストフィールドを定義します(デフォルトの幅は20文字です)
time 時間を入力するためのコントロールを定義します(タイムゾーンなし)
url URLを入力するためのフィールドを定義します
week 週と年コントロールを定義します(タイムゾーンなし)

例

入力タイプ: button

OperaSafariChromeFirefoxInternet Explorer / Edge

それがクリックされたときにはJavaScriptをアクティブにクリック可能なボタン、:

<input type="button" value="Click me" onclick="msg()">
»それを自分で試してみてください

入力タイプ: checkbox

OperaSafariChromeFirefoxInternet Explorer / Edge

チェックボックスは、ユーザーが選択肢の限られた数の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

OperaSafariChromeFirefoxInternet Explorer / Edge

カラーピッカーからカラーを選択します。

Select your favorite color: <input type="color" name="favcolor">
»それを自分で試してみてください

入力タイプ: date

OperaSafariChromeFirefoxInternet Explorer / Edge

日付制御を定義します。

Birthday: <input type="date" name="bday">
»それを自分で試してみてください

入力タイプ: datetime

OperaSafariChromeFirefoxInternet Explorer / Edge

(タイムゾーン付き)、日付と時刻コントロールを定義します。

Birthday (date and time): <input type="datetime" name="bdaytime">
»それを自分で試してみてください

入力datetime型は、HTMLの標準から削除されました。 代わりにdatetime型ローカルを使用してください。


入力タイプ: datetime-local

OperaSafariChromeFirefoxInternet Explorer / Edge

日付と時刻コントロール(タイムゾーンなし)を定義します。

Birthday (date and time): <input type="datetime-local" name="bdaytime">
»それを自分で試してみてください

入力タイプ: email

OperaSafariChromeFirefoxInternet Explorer / Edge

(提出されたときに自動的に検証されます)、電子メールアドレスのフィールドを定義します。

E-mail: <input type="email" name="usremail">
»それを自分で試してみてください

ヒント:iPhone上のSafariは、電子メールの種類を認識し、それに合わせて、オンスクリーンキーボードを変更(@や.COMのオプションが追加されます)。


入力タイプ: file

OperaSafariChromeFirefoxInternet Explorer / Edge

ファイル選択フィールドと(ファイルアップロード用)「参照」ボタンを定義します。

Select a file: <input type="file" name="img">
»それを自分で試してみてください

入力タイプ: hidden

OperaSafariChromeFirefoxInternet Explorer / Edge

(ユーザーには見えない)隠しフィールドを定義します。

隠しフィールドは、多くの場合、デフォルト値を格納する、またはその値には、JavaScriptによって変更されていることができます。

<input type="hidden" name="country" value="Norway">
»それを自分で試してみてください

入力タイプ: image

OperaSafariChromeFirefoxInternet Explorer / Edge

送信ボタンとして画像を定義します。

<input type="image" src="img_submit.gif" alt="Submit">
»それを自分で試してみてください

入力タイプ: month

OperaSafariChromeFirefoxInternet Explorer / Edge

月と年コントロール(タイムゾーンなし)を定義します。

Birthday (month and year): <input type="month" name="bdaymonth">
»それを自分で試してみてください

入力タイプ: number

OperaSafariChromeFirefoxInternet Explorer / Edge

(あなたも受け入れられているものの番号に制限を設定することができます)番号を入力するためのフィールドを定義します。

Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
»それを自分で試してみてください

使用しfollowing制限を指定する属性を:

  • max -許容される最大値を指定します
  • min -許可された最小値を指定します
  • step -法定数の間隔を指定します
  • value -デフォルト値を指定します。

入力タイプ: password

OperaSafariChromeFirefoxInternet Explorer / Edge

パスワードフィールドを定義します(文字はマスクされます)

<input type="password" name="pwd">
»それを自分で試してみてください

入力タイプ: radio

OperaSafariChromeFirefoxInternet Explorer / Edge

ラジオボタンは、ユーザーが選択肢の限られた数のうち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

OperaSafariChromeFirefoxInternet Explorer / Edge

その正確な値(スライダーコントロールなど)は重要ではありません番号を入力するためのコントロールを定義します。 また、数字が受け入れられるものに制限を設定することができます。

<input type="range" name="points" min="0" max="10">
»それを自分で試してみてください

使用しfollowing制限を指定する属性を:

  • max -許容される最大値を指定します
  • min -許可された最小値を指定します
  • step -法定数の間隔を指定します
  • value -デフォルト値を指定します。

入力タイプ: reset

OperaSafariChromeFirefoxInternet Explorer / Edge

リセットボタン(デフォルト値にすべてのフォームの値をリセットします)を定義します。

<input type="reset">
»それを自分で試してみてください

ヒント:慎重にリセットボタンを使用してください!これは、誤ってリセットボタンをアクティブユーザーのために迷惑することができます。


入力タイプ: search

OperaSafariChromeFirefoxInternet Explorer / Edge

(サイト内検索、またはGoogle検索のような)検索フィールドを定義します。

Search Google: <input type="search" name="googlesearch">
»それを自分で試してみてください

入力タイプ: submit

OperaSafariChromeFirefoxInternet Explorer / Edge

送信ボタンを定義します。

<input type="submit">
»それを自分で試してみてください

入力タイプ: tel

OperaSafariChromeFirefoxInternet Explorer / Edge

電話番号を入力するためのフィールドを定義します。

Telephone: <input type="tel" name="usrtel">
»それを自分で試してみてください

入力タイプ: text

OperaSafariChromeFirefoxInternet Explorer / Edge

ユーザーがにテキストを入力できる2つの単一行のテキストフィールドを定義します。

First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
»それを自分で試してみてください

入力タイプ: time

OperaSafariChromeFirefoxInternet Explorer / Edge

時間(タイムゾーンなし)を入力するためのコントロールを定義します。

Select a time: <input type="time" name="usr_time">
»それを自分で試してみてください

入力タイプ: url

OperaSafariChromeFirefoxInternet Explorer / Edge

URLを入力するためのフィールドを定義します。

Add your homepage: <input type="url" name="homepage">
»それを自分で試してみてください

ヒント:iPhone上のSafariは、URLの入力タイプを認識し、それに合わせて、オンスクリーンキーボードを変更(.COMオプションが追加されます)。


入力タイプ: week

OperaSafariChromeFirefoxInternet Explorer / Edge

週と年コントロール(タイムゾーンなし)を定義します。

Select a week: <input type="week" name="week_year">
»それを自分で試してみてください

<HTML <input>タグ