表单相关（form、input、label、button、select、optgroup、option、textarea、fieldset）

最新推荐文章于 2022-04-12 11:34:54 发布

weixin_30709635

最新推荐文章于 2022-04-12 11:34:54 发布

阅读量250

点赞数

原文链接：http://www.cnblogs.com/zhouwanqiu/p/8867255.html

版权

定义表单
　　<form name="" action="" method="" target="" accept-charset="" autocomplete="" enctype="" novalidate="novalidate"></form>

　　　　name：规定表单的名称

　　　　action：URL地址指向php、asp、jsp等后台数据处理程序，规定当提交表单时向何处发送表单数据

　　　　method：规定用于发送表单数据的 HTTP 方法，包括：get(默认)、post；get方法只接受低于1k的信息，url中可见，url长度须小于3000字符，搜索引擎用的是get；post方法允许传送大量信息，数据不显示在url中，申请表单用的是post；

　　　　target：规定在何处打开action中的URL，包括：_self(默认)、_blank、_parent、_top

　　　　accept-charset：规定表单提交时使用的字符编码，默认为包含 <form> 元素的文档的编码

　　　　autocomplete：是否启用表单的自动完成功能，on--默认，规定启用自动完成功能，浏览器会基于用户之前键入的值自动完成值；off--规定禁用自动完成功能，用户必须在每次使用时输入值到每个字段中，浏览器不会自动完成输入

　　　　enctype：规定在向服务器发送表单数据之前如何对其进行编码（适用于 method="post"）

　　　　　　application/x-www-form-urlencoded --默认，在发送前对所有字符进行编码（将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值）

　　　　　　multipart/form-data --不对字符编码，当使用有文件上传控件的表单时，该值是必需的

　　　　　　text/plain --将空格转换为 "+" 符号，但不编码特殊字符

　　　　novalidate：如果使用该属性，则提交表单时不进行验证

　　注意：当表单中有上传控件时，表单的发送方式必须为post，且需要规定表单在发送数据之前如何对数据进行编码的：

一、input

　　　　type：

　　　　　　text：文本（默认，默认宽度为20个字符）

　　　　　　button：自定义按钮

　　　　　　checkbox：复选框

　　　　　　　　一组类型的复选框名称应命名成数组形式：名称[ ]、名称[数字]、名称[字符串]

　　　　　　　　要使复选框与外部文本对齐，添加样式属性“vertical-align:middle;”

　　　　　　　　要去除浏览器本身的checkbox样式，添加样式属性“-webkit-appearance:none;-moz-appearance:none;”

　　　　　　file：定义文件选择字段和 "浏览..." 按钮，供文件上传

　　　　　　hidden：定义隐藏栏位

　　　　　　　　<input type="hidden" name=" " value=" " /> 以隐藏域形式传参

　　　　　　image：以提交按钮形式显示图像

　　　　　　password：密码（字段中的字符会显示为***）

　　　　　　radio：单选钮

　　　　　　　　一组类型的单选钮名称（name）应相同，值（value）不同；

　　　　　　submit：提交按钮

　　　　　　reset：重设按钮（重置所有表单值为默认值）

　　　　　　number：用于输入数字（带值微调控件）

　　　　　　　　要隐藏右侧微调按钮：

　　　　　　　　　　/*firefox*/

　　　　　　　　　　input[type=number] {

　　　　　　　　　　　　-moz-appearance:textfield;

　　　　　　　　　　}
　　　　　　　　　　/*chrome*/

　　　　　　　　　　input[type=number]::-webkit-inner-spin-button,

　　　　　　　　　　input[type=number]::-webkit-outer-spin-button {

　　　　　　　　　　　　-webkit-appearance:none !important;

　　　　　　　　　　　　margin:0;
　　　　　　　　　　}

　　　　　　　　type="number"提供了 stepUP 和 stepDown 两个方法来增加和减少数字

　　　　　　range：数值（带滑动条控件）

　　　　　　color：拾色器

　　　　　　时间日期点选式输入：

　　　　　　　　date：date控件（包括年、月、日，不包括时间）

　　　　　　　　datetime：date和time控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）

　　　　　　　　datetime-local：本地时间（包括年、月、日、时、分、秒、几分之一秒，不带时区）

　　　　　　　　month：月、年（不带时区）

　　　　　　　　time：小时、分钟（不带时区）

　　　　　　　　week：周、年（不带时区）　　　　

　　　　　　email：邮件

　　　　　　url：用于输入网址

　　　　　　search：搜索框

　　　　　　tel：用于输入电话号码

　　　　name：<input>元素的名称，只有设置了 name 属性的表单元素才能在提交表单时传递它们的值，若type为submit/reset则name不必设定；

　　　　value：<input>元素的值，value 属性对于不同 input 类型，用法也不同：

　　　　　　对于 "button"、"reset"、"submit" 类型 --- 定义按钮上的文本

　　　　　　对于 "text"、"password"、"hidden" 类型 --- 定义输入字段的初始（默认）值

　　　　　　对于 "checkbox"、"radio"、"image" 类型 --- 定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL

　　　　　　value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的

　　　　　　value 属性不适用于 <input type="file">

　　　　placeholder：预设提示输入字段，适用于以下的 input 类型：text, search, url, tel, email 以及 password

　　　　　　用CSS修饰placeholder文本：

　　　　　　　　::-webkit-input-placeholder{}

　　　　　　　　::-moz-placeholder{}

　　　　　　　　input:-moz-placeholder{}

　　　　　　　　::-ms-input-placeholder{}

　　　　autocomplete：输入字段是否启用自动完成功能，值包括：on(默认)/off

　　　　form：规定 <input> 元素所属的一个或多个表单，值为表单的id列表，多个表单id用空格分隔

　　　　src：显示为提交按钮的图像的 URL，仅且必须与 <input type="image"> 同时使用

　　　　alt：定义图像输入的替代文本，仅适用 <input type="image">

　　　　height：规定 <input>元素的高度，仅适用于 <input type="image">

　　　　width：规定 <input> 元素的宽度，仅适用于 <input type="image">

　　　　max：最大值，适用于以下 input 类型：number、range、date、datetime、datetime-local、month、time 和 week

　　　　min：最小值，适用于以下 input 类型：number、range、date、datetime、datetime-local、month、time 和 week

　　　　step：数字间隔，step 属性可以与 max 和 min 属性配合使用，以创建合法值的范围，适用于以下的 input 类型：number、range、date、datetime、datetime-local、month、time 和 week

　　　　size：规定以字符数计的可见宽度，适用于以下的 input 类型：text、search、tel、url、email 和 password

　　　　maxlength：规定输入的最大字符数

　　　　pattern：用于验证值的正则表达式，值为正则表达式，适用于以下 input 类型：text、search、url、tel、email 和 password，请使用全局的 title 属性来描述模式以帮助用户

　　　　　　<input type="text" pattern="[0-9]" title="错误提示信息" /> 必须是0~9之间的数字

　　　　　　<input type="text" pattern="[A-z]{3}" title="错误提示信息" /> 3个字母

　　　　　　<input type="text" pattern="^[a-zA-Z]\w{5,7}$" title="错误提示信息" /> 必须以字母开头，包含字符或数字和下划线，长度6~8

　　　　list：引用包含<input>元素的预定义选项的 <datalist> 元素，值为绑定到<input>的<datalist>的id

　　　　　　</datalist>

　　　　　　<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据；

　　　　formaction：当表单提交时处理输入控件的文件的 URL，覆盖 <form> 元素的 action 属性，适用于<input type="submit"> 和 <input type="image">

　　　　formenctype：规定当表单数据提交到服务器时如何编码（仅适用于 method="post" 的表单），覆盖 <form> 元素的 enctype 属性，适用于<input type="submit"> 和 <input type="image">

　　　　　　application/x-www-form-urlencoded ---默认，在发送前对所有字符进行编码，将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值

　　　　　　multipart/form-data ---不对字符编码，当使用有文件上传控件的表单时，该值是必需的

　　　　　　text/plain ---将空格转换为 "+" 符号，但不编码特殊字符

　　　　formmethod：定义发送表单数据到 action URL 的 HTTP 方法，包括：get(默认)/post，覆盖 <form> 元素的 method 属性，适用于<input type="submit"> 和 <input type="image">

　　　　formtarget：提交表单后在哪里显示接收到响应的名称或关键词，包括：_self(默认)、_blank、_parent、_top、framename，覆盖 <form> 元素的 target 属性，适用于<input type="submit"> 和 <input type="image">

　　　　accept：规定通过文件上传来提交的文件的类型，仅适用于 <input type="file">，请避免使用该属性，应该在服务器端验证文件上传

　　　　　　audio/* ---接受所有的声音文件

　　　　　　video/* ---接受所有的视频文件

　　　　　　image/* ---接受所有的图像文件

　　　　　　MIME_type ---有效的 MIME 类型

　　　　　　如需规定多个值，请使用逗号分隔

　　　　单属性：

　　　　　　disabled：禁用<input>元素，表单中被禁用的 <input> 元素不会被提交，disabled 属性不适用于 <input type="hidden">

　　　　　　readonly：规定输入字段是只读的

　　　　　　required：指示输入字段的值是必须的，以检验输入内容不可为空，required 属性适用于下面的 input 类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file

　　　　　　autofocus：当页面加载时 <input> 元素自动获得焦点

　　　　　　checked：默认被选中，适用于 <input type="checkbox"> 和 <input type="radio">

　　　　　　multiple：可选择多个值，适用于 <input type="email"> 和 <input type="file">

　　　　　　formnovalidate：规定当表单提交时不进行验证，覆盖 <form> 元素的 novalidate 属性，适用于 <input type="submit" formnovalidate="formnovalidate">

<!-- 设置input为只读，且不显示光标 -->
<!-- PC端 -->
<input type="" readonly="readonly" unselectable="on" value="" />
<!-- 移动端 -->
<input type="" readonly="readonly" unselectable="on" onfocus="this.blur()" value=""/>
<!-- 或者在CSS中修饰 -->
input{
    /*firefox*/
    -moz-user-select: none;
   /*chrome*/ 
    -webkit-user-select: none;
}

二、label

　　　　<label for="inputID" form="formID">输入框旁显示的标注文本</label>

　　</form>

　　<label> 标签为 input 元素定义标注（标记），不会向用户呈现任何特殊效果，用户点击标注文本时，浏览器就会自动将焦点转到和标签相关的表单控件上

　　　　for：可把 label 绑定到另外一个元素，应当与相关元素的 id 属性值相同

　　　　form：规定所属的一个或多个表单的id值，多个id值用空格分隔

三、button

　　<button> 标签定义一个按钮

　　　　type：button(可点击的按钮，IE的默认值)、submit(提交按钮，除了IE，该值是其他浏览器的默认值)、reset(重置按钮，清除表单数据)

　　　　name：按钮名称，不同的 <button> 元素可以共享相同的名称，这就允许您标记带有相同名称的若干按钮，以便在表单中使用时能够提交不同的值。

　　　　value：规定按钮的初始值

　　　　form：规定按钮属于一个或多个表单的id，多个表单id用空格分隔

　　　　formaction：URL，规定当提交表单时向何处发送表单数据，覆盖 form 元素的 action 属性，仅适用于<button type="submit"></button>

　　　　formenctype：规定在向服务器发送表单数据之前如何对其进行编码，覆盖 form 元素的 enctype 属性，仅适用于<button type="submit"></button>

　　　　　　application/x-www-form-urlencoded ---默认，在发送前对所有字符进行编码

　　　　　　multipart/form-data ---不对字符编码，当使用有文件上传控件的表单时，该值是必需的

　　　　　　text/plain ---将空格转换为 "+" 符号，但不编码特殊字符

　　　　formmethod：get/post，规定用于发送表单数据的 HTTP 方法，覆盖 form 元素的 method 属性，仅适用于<button type="submit"></button>

　　　　formtarget：_self(默认)、_blank、_parent、_top、framename，规定在何处打开 action URL，覆盖表单元素的 target 属性，仅适用于<button type="submit"></button>

　　　　单属性：

　　　　　　disabled：禁用按钮

　　　　　　autofocus：当页面加载时按钮自动获得焦点

　　　　　　formnovalidate：提交表单时按钮不会执行验证过程，覆盖表单的 novalidate 属性，仅适用于<button type="submit"></button>

　　与 <input type="button">的不同：

　　　　<button> 与 </button> 标签之间的所有内容都是按钮的内容，比如文本或多媒体内容，例如我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像；

　　　　请始终为 <button> 元素规定 type 属性，不同的浏览器对 <button> 元素的 type 属性使用不同的默认值，Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"；

　　　　如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值，IE 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容，故在 HTML 表单中推荐使用 input 元素来创建按钮；

四、select、optgroup、option

　　<form>

　　　　</select>

　　</form>

　　<select> ---用来创建下拉列表

　　　　name：下拉列表名称（整个控件名）

　　　　size：下拉列表中可见选项的数目，默认值是 1，如果使用了 multiple 属性，默认值是 4

　　　　form：规定下拉列表所属的一个或多个表单id，多个表单id用空格分隔

　　　　单属性：

　　　　　　autofocus：页面加载时下拉列表自动获得焦点

　　　　　　disabled：禁用下拉列表

　　　　　　multiple：可同时选择多个选项

　　　　　　required：规定用户在提交表单前必须选择一个下拉列表中的选项

　　　　可多选式下拉框：

　　　　　　一组类型的多选式下拉框应命名成数组形式

　　分组式下拉框：

　　　　<form>

　　　　　　　　</optgroup>

　　　　　　</select>

　　　　</form>

　　　　<optgroup> ---定义选项组

　　　　<option> ---定义一条选项

　　　　　　value：定义送往服务器的选项值，如果没有规定 value 属性，选项的值将设置为 <option></option> 之间的内容

　　　　　　label：规定下拉列表中会显示出的更短版本选项文本

　　　　　　单属性：

　　　　　　　　disabled：此选项在加载时被禁用

　　　　　　　　selected：此选项在加载时被选中　

<!-- 选择下拉值实现跳转并传递参数值 -->
<select onchange="javascript:window.location.href=this.value;">
    <option value="www.baidu.com?id=1"></option>
    <option value="www.google.com?id=2"></option>
</select>

五、textarea

　　　　name：文本域的名称

　　　　rows：文本域可见行数，显示高度，默认值为2

　　　　cols：文本域可见列数，显示宽度（以平均字符宽度计），默认值是20

　　　　maxlength：文本域允许的最大字符数

　　　　placeholder：规定一个简短的提示，它描述了文本区域的期望值，当文本区域为空，且当字段获得焦点后又失去焦点时，文本区域中显示该提示

　　　　form：定义文本域所属的一个或多个表单id，多个表单id以空格分隔

　　　　wrap：规定当提交表单时，文本区域中的文本应如何换行

　　　　　　soft ---默认，不换行

　　　　　　hard ---文本换行（包含换行符），使用 hard 属性时必须指定 cols 属性，textarea中的文本会根据 cols 的值进行换行

　　　　单属性：

　　　　　　autofocus：页面加载时文本域自动获得焦点

　　　　　　disabled ：禁用文本域

readonly ：规定文本域为只读

required ：规定文本域是必填的（以便提交表单）

六、fieldset

　　<form>

　　<hr />

　　</fieldset>

　　</form>

　　<fieldset> ---创建组合式表单，会在一组表单元素周围绘制边框

　　　　name：规定<fieldset>的名称

　　　　form：规定<fieldset>所属的一个或多个表单id，多个表单id用空格分隔

　　　　disabled：禁用<fieldset>下的所有元素

　　<legend> ---为 <fieldset> 元素定义标题

转载于:https://www.cnblogs.com/zhouwanqiu/p/8867255.html

weixin_30709635

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
表单相关（form、input、label、button、select、optgroup、option、textarea、fieldset）

定义表单　　<form name="" action="" method="" target="" accept-charset="" autocomplete="" enctype="" novalidate="novalidate"></form>　　　　name：规定表单的名称　　　　action：URL地址指向php、asp、jsp等后台数据处理程序，规定...
复制链接

扫一扫