input form attributes

Today doing the project frequently uses the <input> elements, but found a lot of properties do not understand. Find information summary.

accept the provisions of the type of file to be submitted by file upload.

//只能与 <input type="file"> 配合使用。
//例如只允许上传图片文件
 <input type="file" name="pic" id="pic" accept="image/*" />

align a predetermined alignment of the input image.

值:left | right | top | middle | bottom 【不赞成使用。】

alt define alternate text image input.

alt 属性只能与 <input type="image"> 配合使用。
alt 属性为用户由于某些原因无法查看图像时提供了备选的信息。

autocomplete specify whether to use auto-complete input field.

自动完成允许浏览器预测对字段的输入。
当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。
值: on | off
适用于 <form>,以及下面的 <input> 类型:text, search, url, telephone, email, password, datepickers, range 以及 color。

autofocus provisions input field is to get the focus when the page loads.

【不适用于 type="hidden"】
值:autofocus

checked the provisions of this input should be selected when the element is first loaded.

与 <input type="checkbox"> 或 <input type="radio"> 配合使用
值:checked

disabled disable this element when the input element is loaded.

被禁用的 input 元素既不可用,也不可点击。
值:disabled

form input specifying one or more form field belongs.

form 属性的值必须是其所属表单的 id。
可用于表单以外的输入字段
<form id="nameform">...</form>
Last name: <input type="text" name="lname" form="nameform" />

formaction covering action attribute form.

(适用于 type="submit" 和 type="image")

formenctype cover form enctype attribute.

(适用于 type="submit" 和 type="image")
值:
  • application / x-www-form-urlencoded encoding [(default) on all the characters before transmission. ]

  • multipart / form-data [not character encoding. When there is a file upload control form, this value is required. ]

  • text / plain [to convert the space into "+" sign, but does not encode special characters. ]

formmethod cover form method attribute.

(适用于 type="submit" 和 type="image")
值:get | post

formnovalidate cover novalidate property sheet.

如果使用该属性,则提交表单时不进行验证。
适用于 <form> 以及以下类型的 <input>:text, search, url, telephone, email, password, date pickers, range 以及 color。
值:formnovalidate

formtarget overriding the target property sheet.

(适用于 type="submit" 和 type="image")
HTML5 不支持框架和框架集。parent, top 和 framename 值大多用于 iframe。
  • _blank [in a new window tab of the form / submit to the document. ]

  • _self [in the same frame in the form submitted to the document. (default)】

  • _parent [document will be submitted to the form in the parent frame. ]

  • _top [in the form submitted to the entire document window]

  • framename [in the form specified in the framework document submitted to. ]

List datalist reference to the above mentioned id-datalist containing predefined options in the input field.

<label>网页:</label><input type="url" list="url_list" name="link" />
<datalist id="url_list">
    <option label="W3School" value="http://www.w3school.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

step provision of legal digital input word spacing.

<input type="number" name="points" step="3" />
//合法数字应该是 -3、0、3、6,以此类推    

max predetermined maximum value of the input field.

min predetermined minimum value of the input field.

step、max 和 min 属性适用于以下 <input> 类型:number, range, date, datetime, datetime-local, month, time 以及 week。

maxlength predetermined maximum length of the character input field.

maxlength 属性规定输入字段的最大长度,以字符个数计。
maxlength 属性与 <input type="text"> 或 <input type="password"> 配合使用。

size defines the width of the input field.

对于 <input type="text"> 和 <input type="password">,size 属性定义的是可见的字符数。
而对于其他类型,size 属性定义的是以像素为单位的输入字段宽度。

multiple If this attribute is to allow more than one value.

【需要上传多个文件时可使用该属性】

name Defines the name of input element.

属性用于对提交到服务器后的表单数据进行标识
或者在客户端通过 JavaScript 引用表单数据。
只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

pattern predetermined pattern or format of the value of the input field.

pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。
适用于以下 <input> 类型:text, search, url, telephone, email 以及 password 。

placeholder provisions prompts to help users fill in the input field.

该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password

readonly predetermined input field is read-only.

可与 <input type="text"> 或 <input type="password"> 配合使用。
只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本。

required value indicates the input field is required.

适用于以下 <input> 类型:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

src URL defined URL of the image displayed in the form submit button.

只能与 <input type="image"> 配合使用。

type specified input type elements.

  • button definitions can click the button.

  • checkbox Definition check box.

  • file input fields and define the "Browse" button, for file uploads.

  • hidden defined hidden input field.

  • image defining an image of form submit button.

  • password defined password field. The characters in the field are masked.

  • radio defined radio button.

  • defined reset reset button. Reset button will erase all data in the form.

  • submit define the submit button. Submit button will send the form data to the server.

  • Single-line text input field is defined, the user can enter text. The default width is 20 characters.

value prescribed value input elements.

对于不同的输入类型,value 属性的用法也不同:
type="button", "reset", "submit" - 定义按钮上的显示的文本
type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值
注释:<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。

width defines the width of the input field.

height define the height of the input field

width和height只适用于 type="image"

PS: [Custom] to input UI elements

<input type="file" />默认的样式是这样的。

clipboard.png

Using the label for the property, it may well change the style.

<label class="btn btn-primary" for="xFile">上传文件</label>
<form><input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"></form>

The example above is actually a hidden input. It can also be used

style="visibility:hidden"
或者
style="display:none"

FIG effect as

clipboard.png

Guess you like

Origin www.cnblogs.com/jlfw/p/12638463.html