表单元素盘点第一弹<input>元素详细介绍

简介: <input>元素详细介绍

标签:

  • 此标签为input元素定义标记,label元素不会向用户呈现任何特殊效果,当用户选择此便签时,浏览器会自动将焦点转到标签相关的表单控件上。
  • label标签的for属性应当与相关元素的id属性相同。


属性:


(1)for属性:规定label与哪个表单元素绑定。

<label for="male">Male</label><!--绑定元素的id-->
<input type="radio" name="sex" id=male">


  • 显式形式:标签下的for属性命名一个目标表单id。
<label for="SSN">social</label>
<input type="text" name="numb" id="SSN"/>


  • 隐式形式:将表单控件为标记标签的内容。
<label>Data of : <input type="text" name="DEF" /></label>

(2)form属性:规定label所属的一个或多个表单。


form属性值必须是其所属的表单的id,若引用一个以上的表单,请使用空格分隔的列表。

<form id="nameform">
    <label for="name" form="nameform">male</label>
    ……
</form>

元素的属性

1、accept属性 (只能与配合使用)

该属性规定能够通过文件上传进行提交的文件类型。(避免使用此属性,应该在服务器端验证文件上传。)

<input type="file" accept="image/gif"><!--image/gif为文件类型>


2、align属性(只能与配合使用)

该属性规定图像输入相对于周围其他元素的对齐方式。(不推荐使用,推荐用CSS来设定)

<input type="image" style="float: right;"/>


补充:

CSS float属性:


  1. right:元素向右浮动
  2. left:元素向左浮动
  3. none:元素不浮动(默认值)
  4. inherit:规定应从父元素继承float属性的值。


3、alt属性(只能与配合使用)

该属性为图像输入规定替代文本。(不属于必需属性)


alt属性为用户由于某些原因无法查看图像时提供了备选信息。当输入类型为image时,应该设置该属性。

<input type="image"  src=QQ图片.jpg alt ="Sumbit"/>


4、autocomplete属性

该属性规定输入字段是否应该启用自动完成功能。


自动完成允许浏览器预测对字段的输入,当用户在字段开始输入时,浏览器基于之前输入过得值,应该显示出在字段中填写的选项。


属性值 描述
on 默认值,开启自动完成功能。
off 禁止启用自动完成功能


<input type="email" name="emailz" autocomplete="on"/>

autocomplete适用于及类型:


text,search,URL,telephone,email,Password,datepickers,range,color


5、autofocus属性(不适用于)

该属性规定当页面加载时input元素应该自动获取焦点。

<input type="text" name="abc" autofocus="autofocus"/>


6、checked属性(与或配合使用)

该属性规定在页面加载时应该被预先选定的input元素。

<input type="checkbox" name="abc" value="car" checked="checked"/>


7、disabled属性(不适用于)

该属性规定应该禁用的input元素。被禁用的input元素既不可用,也不可点击。可通过JS来删除disabled的值,将input元素的值切换为可用。

<input type="text" name="abc" disabled="disabled"/>


8、form属性

该属性规定input元素所属的一个或多个表单。


form属性值必须是其所属的表单的id,若引用一个以上的表单,请使用空格分隔的列表。

<form action="/04.jpg" method="get" id="form1">
       first name:<input type="text" name="fname" form="form1"/>
 </form>

9、formaction属性(适用于和)

覆盖form元素的action属性。

属性值 描述
相对URL 指向站内的文件(如,src=“example.htm”)
绝对URL 指向其他站点(如,src="www.baidu.com")
<input type="text" name="fname" form="nameform"/>


10、formenctype属性(与和配合使用)

覆盖form元素的enctype属性。

属性值 描述
application/x-www-form-urlencoded 在发送前对所有字符进行编码(默认值)。
mulitpart/form-data 不对字符编码,当使用有文件上传控件的表单时,该值是必需的。
text/plain 将空格转换为“+”,但不编码特殊字符。

11、formmethod属性(与和配合使用)

覆盖form元素的method属性。

属性值 描述
post 以HTTP post事务的形式发生表单数据。
get 以URL追加表单数据: URL?name=value&name=value
<input type="submit" formmethod="post" formaction="deno_post.asp" value="Sumbit"/>


12、formnovalidate属性:

覆盖form元素的novalidate属性,如果使用该属性,则提交表单时按钮不会执行验证过程。

<input type="submit" formnovalidate="formnovalidate" value="Sumbit"/>


13、formtarget属性(与和配合使用)

覆盖form元素的target属性。


HTML5不支持框架和框架集。

属性值 描述
_blank

在新窗口/选项卡中将表单提交到文档。

_self 在同一框架中将表单提交到文档(默认值)。
_parent 在父框架中将表单提交到文档。
_top 在整个窗口中将表单提交到文档。
framename 在指定的框架中将表单提交到文档。
<input type="submit" formtarget="_blank" value="Sumbit"/>


14、height/width属性(只能与配合使用)

该属性规定image input的高度/宽度。

属性值 描述
pixels 以像素计为单位
% 以包含元素的百分比计为单位
<input type="image" src="img_sumbit.gif" alt="sumbit1" width="128" height="128" />


15、list属性:

该属性引用数据列表,其中包含输入字段的预定义选项。

<input type="url" list="url_list" name="link" /> <!--list的值为文档中的datalist的id-->


16、max/min属性

该属性规定输入字段所允许的最大值/最小值,配合使用可创建取值范围。

属性值 描述
number 数字值。
date 日期。
<input type="number" name="point" min="0" max="10"/>

17、maxlength属性(与或配合使用)

该属性规定输入字段的最大值及字符个数计。

<input type="text" name="point" maxlength="85"/>


18、multiple属性 (适用于和)

该属性规定输入字段可选择多个值。

<input type="file" name="point" multiple="multiple"/>

19、name属性:


该属性规定input元素的名称,用于对提交服务器后的表单数据进行标识,只有设置了name属性的表单元素才能在提交表单时传递它们的值。


20、pattern属性:

该属性规定用于验证输入字段的模式(正则表达式)。

<input type="text" name="point" pattern="[A-z]{3}"/>


21、placeholder属性:

该属性提供可描述字段预期值的提示信息,该提示会在输入字段为空时显示,输入信息后则会消失。

<input type="text" name="point" placeholder="hello"/>


22、readonly属性(适用于和)

该属性规定输入字段为只读,只读字段不能修改。


用户可以使用tab键切换到该字段,还可以选中或拷贝文本。

<input type="text" name="point" value="china" readonly="readonly"/>


23、required属性:

该属性必需在提交之前填写输入字段,若使用该属性,则字段是必填(或必须)的。

<input type="text" name="point" required="required"/>


24、size属性:

该属性定义输入字段的宽度。


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


在这里推荐使用CSS来代替:

<input type="text" style="width:100px"/>


25、src属性(只能与配合并同时使用)

该属性规定作为提交按钮显示的图像的URL。

属性值

描述

post 以HTTP post事务的形式发生表单数据。
get 以URL追加表单数据: URL?name=value&name=value
<input type="image" src="submit.jpg" alt="sumbit" />


26、step属性:

规定输入字段的合法数字间隔,可以与max以及min属性配合使用。

<input type="number" name="point" step="3" />


27、type属性

属性值 描述
button 定义可点击按钮

checkbox

定义复选框
file 定义输入字段和浏览按钮,供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义图像形式的提交按钮
radio 定义密码字段,该字段中的字符被掩码
reset 定义单选按钮
submit 定义重置按钮
text 定义单行的输入字段,用户可以其中输入文本,默认20个字符


28、value属性:

为input元素设定值。


  • type=“bottom”,“reset”,“submit”——定义按钮上的显示文本。
  • type=“text”,“password”,“hidden”——定义输入字段的初始值。
  • type=“checkbox”,“radio”,“image”——定义与输入相关联的值。
  • 无法与type=“file”一同使用。


目录
相关文章
|
1月前
|
JavaScript 前端开发
页面插入元素
页面插入元素
20 8
|
6月前
|
JSON JavaScript 数据格式
jQuery数据结构渲染(3):文本和input/textarea框赋值
jQuery数据结构渲染(3):文本和input/textarea框赋值
30 1
|
8月前
|
移动开发
操作元素样式
操作元素样式
|
Python
LeetCode 1299. 将每个元素替换为右侧最大元素
给你一个数组 arr ,请你将每个元素用它右边最大的元素替换,如果是最后一个元素,用 -1 替换。
71 0
|
移动开发 安全 数据可视化
HTML的笔记及展示(2)(表单元素、input元素、label、button以及HTML5新增的一些元素)
HTML的笔记及展示(2)(表单元素、input元素、label、button以及HTML5新增的一些元素)
180 0
HTML的笔记及展示(2)(表单元素、input元素、label、button以及HTML5新增的一些元素)
|
JavaScript 索引
jQuery判断当前元素是第几个元素&获取第N个元素
jQuery判断当前元素是第几个元素&获取第N个元素
198 0
|
前端开发
如何优雅地为列表非首项元素添加样式,关键靠他们。
在开发中我们常常会会遇到列表相关的场景,比如说:卡片列表,导航栏等等。
85 4
如何优雅地为列表非首项元素添加样式,关键靠他们。
|
容器
2、表格和表单元素
2、表格和表单元素
81 0
2、表格和表单元素
|
前端开发 JavaScript
|
JavaScript