企业管理系统定制开发表单元素盘点第一弹<input>元素详细介绍

企业管理系统定制开发博主有话说:企业管理系统定制开发如果有描述错误之处请大家纠正。企业管理系统定制开发让我们可以一起学习一起进步。

个人主页:

内容专栏:

企业管理系统定制开发此块内容为纯纯的干货,企业管理系统定制开发略显乏味枯燥,企业管理系统定制开发是笔记向的blog。企业管理系统定制开发如果觉得还不错,企业管理系统定制开发希望你可以一键三连,企业管理系统定制开发一整个大感谢。

 input必须得给它拿捏得死死的。

Input元素用于搜集用户信息,它的属性真的非常之多,笔记都写了好几页。在get<input>元素之前,先来为<label>打一波call。

<label>标签:

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

属性:

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

  1. <label for="male">Male</label><!--绑定元素的id-->
  2. <input type="radio" name="sex" id=male">
  •  显式形式:<label>标签下的for属性命名一个目标表单id。
  1. <label for="SSN">social</label>
  2. <input type="text" name="numb" id="SSN"/>
  •  隐式形式:将表单控件为标记标签的内容。
<label>Data of : <input type="text" name="DEF" /></label>

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

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

  1. <form id="nameform">
  2. <label for="name" form="nameform">male</label>
  3. ……
  4. </form>

你们的魔鬼来咯。321

<input>元素的属性

1、accept属性 (只能与<input type="file">配合使用)

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

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

 2、align属性(只能与<input type="image">配合使用)

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

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

补充:

CSS float属性:

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

3、alt属性(只能与<input type="image">配合使用)

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

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

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

 4、属性

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

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

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

 

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

autocomplete适用于<form>及<input>类型:

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

5、autofocus属性(不适用于<input type="hidden">)

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

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

6、checked属性(与<input type="checkbox">或<input type="radio">配合使用)

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

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

 7、disabled属性(不适用于<input type="hidden">)

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

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

8、form属性

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

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

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

 9、formaction属性(适用于<input type="submit">和<input type="image">)

覆盖form元素的action属性。

属性值描述
相对URL指向站内的文件(如,src=“example.htm”)
绝对URL指向其他站点(如,src="www.baidu.com")

 

<input type="text" name="fname" form="nameform"/>

10、formenctype属性(与<input type="submit">和<input type="image">配合使用)

覆盖form元素的属性。

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

11、formmethod属性(与<input type="submit">和<input type="image">配合使用)

覆盖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属性(与<input type="submit">和<input type="image">配合使用)

覆盖form元素的target属性。

HTML5不支持框架和框架集。

属性值描述
_blank在新窗口/选项卡中将表单提交到文档。
_self

在同一框架中将表单提交到文档(默认值)。

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

14、height/width属性(只能与<input type="image">配合使用)

该属性规定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">或<input type="password">配合使用)

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

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

18、multiple属性 (适用于<input type="email">和<input type="file">)

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

 <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属性(适用于<input type="text">和<input type="password">)

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

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

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

23、required属性:

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

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

24、size属性:

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

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

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

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

25、src属性(只能与<input type="image">配合并同时使用)

该属性规定作为提交按钮显示的图像的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”一同使用。

 

 

 

 

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发