Html-input-tag

提供:Dev Guides
移動先:案内検索

HTML-<input>タグ

説明

HTMLの<input>タグは、入力要素(ユーザーがデータを入力できるようにするコントロール)を宣言するためにフォーム内で使用されます。

<!DOCTYPE html>
<html>

   <head>
      <title>HTML input Tag</title>
   </head>

   <body>
      <form action = "/cgi-bin/hello_get.cgi" method = "get">
         First name:
            <input type = "text" name = "first_name" value = "" maxlength = "100"/>
            <br/>

         Last name:
            <input type = "text" name = "last_name" value = "" maxlength = "100"/>
         <input type = "submit" value = "Submit"/>
      </form>
   </body>

</html>

これは、次の結果を生成します-

グローバル属性

このタグは、− link:/html/html_attributes_reference [HTML属性リファレンス]で説明されているすべてのグローバル属性をサポートします

特定の属性

HTML <input>タグは、次の追加属性もサポートしています-

Attribute Value Description
accept content types Specifies a comma-separated list of content types that the server accepts.
align left right top middle bottom Deprecated − Defines the alignment of content
alt text This specifies text to be used in case the browser/user agent can’t render the input control.
autocomplete html-5 onoff Specifies for enabling or disabling of autocomplete in <input> element
autofocus html-5 autofocus pecifies that <input> element should automatically get focus when the page loads
checked checked If type = "radio" or type = "checkbox" it will already be selected when the page loads.
disabled disabled Disables the input control. The button won’t accept changes from the user. It also cannot receive focus and will be skipped when tabbing.
formhtml-5 form_id Specifies one or more forms
formaction html-5 URL Specifies the URL of the file that will process the input control when the form is submitted
formenctypehtml-5

application/x-www-form-urlencoded

マルチパート/フォームデータ

テキスト/プレーン

Specifies how the form-data should be encoded when submitting it to the serve
formmethod html-5 post get Defines the HTTP method for sending data to the action URL
formnovalidate html-5 formnovalidate Defines that form elements should not be validated when submitted
formtarget html-5 _blank _self _parent _top Specifies the target where the response will be display that is received after submitting the form
height html-5 pixels Specifies the height
list html-5 datalist_id Specifies the <datalist> element that contains pre-defined options for an <input> element
max html-5 autofocus Specifies the maximum value.
maxlength number Defines the maximum number of characters allowed in a text field
min html-5 number Specifies the minimum value.
multiple html-5 multiple Specifies that a user can enter multiple values
name text Assigns a name to the input control.
pattern html-5 regexp Specifies a regular expression that an <input> element’s value is checked against
placeholder html-5 text Specifies a short hint that describes the expected value.
readonly readonly Sets the input control to read-only. It won’t allow the user to change the value. The control however, can receive focus and are included when tabbing through the form controls.
required html-5 required Specifies that an input field must be filled out before submitting the form
size number Specifies the width of the control. If type = "text" or type = "password" this refers to the width in characters. Otherwise it’s in pixels.
src URL Defines the URL of the image to display. Used only for type = "image".
step html-5 number Specifies the legal number intervals for an input field
type button checkboxcolor date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week Specifies the type of control.
value text Specifies the intial value for the control.If type = "checkbox" or type = "radio" this attribute is required.
width html-5 pixels Specifies the width

イベント属性

このタグは、link:/html/html_events_reference [HTMLイベントリファレンス]で説明されているすべてのイベント属性をサポートしています。

ブラウザのサポート

Chrome Firefox IE Opera Safari Android
Yes Yes Yes Yes Yes Yes