HTML:form表单总结,input,select,option,textarea,label
<form>标签是块级元素。
form标签的标准属性有id,class,style,title,lang,xml:lang.
表单能够包含input元素(包含button,checkbox,file,hidden,image,password,radio,reset,submit,text)、menu、textarea、fieldset、legend和label元素。
- action属性表示提交表单时向何处发送表单数据(表单数据发送到 action 属性所规定的页面)。(必须)
- method属性表示表单提交的方式。有get和post两种方式。get与post的区别见www.w3school.com.cn(必须)
- name属性规定表单的名称。同时name属性提供了一种在脚本中引用表单的方法。一般不用js的时候可以不写该属性。
- target属性,目标
- enctype属性规定在发送到服务器之前应该如何对表单进行编码。默认值:application/x-www-form-urlencoded发送前编码所有字符(空格转换成加号,特殊符号转为为ASCII HEX值);还有另外两个值,multipart/form-data不对字符编码(在使用包含文件上传控件的表单时,必须使用。);text/plain空格转换为"+"加号,但不对特殊字符编码。
..............................................................................................................................
<input>标签用于搜集用户信息。根据不同的type类型,输入字段拥有多种形式。行内元素。
- type属性button,checkbox,file,hidden,image,password,radio,reset,submit,text。
- value属性规定input元素的值。
对于不同的类型,value属性的用法不同:
type="button","reset","submit"-定义按钮上显示的文本。
type="text","password","hidden"-定义输入字段的默认值。
type="checxbox","radio","image"-定义与输入相关联的值,提交到处理页面的值。
注释:type="checkbox","radio"中必须设置value的值。
注释:value属性无法与type="file"一同使用。 - name属性定义input元素的名称;name属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过JavaScript引用表单数据。注释:只有设置了name属性的表单元素才能在提交表单时传递他们的值。
- maxlength属性规定输入字段的最大长度,以字符个数计数。maxlength属性与type="text"和type="password"配合使用。(默认255)
- src属性只能,必须与type="image"配合使用。 规定提交按钮显示的图像的URL。
- size属性规定输入框(有的说输入字段)的宽度。对于type="text"和type="password",size定义的是能显示在框内的西文字符数,对于其它类型,size属性定义的是以像素为单位的输入框宽度。size属性推荐使用css来代替。<input style="width:100px" />(默认20)
- readonly属性规定字段为只读。只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本。readonly 属性可以防止用户对值进行修改,直到满足某些条件为止(比如选中了一个复选框)。然后,需要使用 JavaScript 消除 readonly 值,将输入字段切换到可编辑状态。readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。用法:<input type="text" readonly="readonly">
- disabled属性规定应该禁用input元素。被禁用的 input 元素既不可用,也不可点击。可以设置 disabled 属性,直到满足某些其他的条件为止(比如选择了一个复选框等等)。然后,就需要通过 JavaScript 来删除 disabled 值,将 input 元素的值切换为可用。注释:disabled属性无法与type="hidden"一起使用。用法:<input type="text" diasbled="disabled">
- checked属性规定在页面加载时应该被预先选定的input元素。checked属性与type="checkbox"和type="radio"配合使用,设定加载后显示时的首选input元素。checked属性也可以在页面加在后通过JavaScript代码进行设置。用法:<input type="checkbox" checked="checked">
- alt属性定义图像的替代文本。如果图像无法显示,会显示替代文本。只能与type="image"配合使用。虽然alt属性不是必需属性,但是在image时,仍然应该设置该属性。如果不使用,可能对文本浏览器或非可视浏览器照成障碍。
- accept属性规定文件上传来提交的文件的类型。只能与type="file"配合使用,规定上传文件的类型。提示:请避免使用该属性。应该在服务器端验证文件上传。
- align属性规定图像输入的对其方式。与type="image"配合使用。只用left和right得到所有浏览器的支持。默认left,还有right,top,middle,bottom。推荐使用css替代<input type="image" style="float:left" />
..............................................................................................................................
<input type="text" />定义单行输入字段,默认宽度20个字符(size属性)
- maxlength属性表示文本输入框中输入内容的最大数量,以字符个数为度量单位(默认255)。(需要限制时必须)
- value属性用于设置文本框的默认值。(需要限制时必须)
- size属性表示文本框的宽度,对于type="text"和type="password",size定义的是能显示在框内的西文字符数,对于其它类型,size属性定义的是以像素为单位的输入框宽度。size属性推荐使用css来代替。<input style="width:100px" />。(需要限制时必须)
- onclick="this.value=''"事件表示单击文本框,文本框中默认内容清空(一般用于设置默认值时使用)。(需要限制时必须)
- name属性定义input元素的名称。name的作用是作为与服务器交互数据的HTML元素的服务器端的标识,比如input,select,textarea和button等。我们在服务器端根据其name通过Request.Params取得元素提交的值。如果用id,服务器是无法获得数据的。如果数据不提交到服务器,可以不用name属性。name的另外一个作用是客户端通过JavaScript引用表单数据。注释:只有设置了name属性的表单元素才能在提交表单时传递他们的值。(提交数据到服务器时必须)
- readonly属性规定字段为只读。只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本。readonly 属性可以防止用户对值进行修改,直到满足某些条件为止(比如选中了一个复选框)。然后,需要使用 JavaScript 消除 readonly 值,将输入字段切换到可编辑状态。用法:<input type="text" readonly="readonly">或直接readonly。可以使用onclick时间来清空默认值。(一般不用)
- disabled属性规定应该禁用input元素。被禁用的 input 元素既不可用,也不可点击。可以设置 disabled 属性,直到满足某些其他的条件为止(比如选择了一个复选框等等)。然后,就需要通过 JavaScript 来删除 disabled 值,将 input 元素的值切换为可用。用法:<input type="text" diasbled="disabled">或直接disabled(一般不用).
<form>
your name:
<input type="text" name="yourname" size="30" maxlength="20" value="输入框的长度为30,允许最大字符数为20" /><br>
<input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能读不能修改" />
</form>
..............................................................................................................................
<input type="password" />定义密码字段。密码字段中的字符会被掩码
参数与type="text"相类似,有type,name,value,maxlength,size,disabled,readonly属性。
<form>
your password:
<input type="password" name="yourpwd" size="20" maxlength="15" value="123456" />密码长度小于15
</form>
特殊属性disabled与readonly与text的一样。
..............................................................................................................................
<input type="submit" />定义提交按钮。提交按钮用来向服务器发送表单数据。数据会发送到表单的action属性中指定的页面。
<input type="reset" />定义重置按钮。重置所有内容
属性有type,value,name,size,一般值需要使用type与value属性
value属性表示按钮上显示的文本。
<form>
your name
<input type="text" value="your name" maxlength="30" size="50" onclick="this.value=''" /><br />
<input type="submit" value="提交" />
 
<input type="reset" value="重置" />
</form>
..............................................................................................................................
<input type="button" />定义可点击的按钮,但没有任何的行为。常用于在用户点击按钮时启动JavaScript程序。
标准的window风格按钮,要实现跳转需要写入JavaScript代码。
value属性为按钮上显示的文本
name属性用于客户端JavaScript对数据操作。
<form>
your button:
<input type="button" value="Yes" name="youinfo" onclick="window.open('http://www.baidu.com')" />
</form>
..............................................................................................................................
<input type="hidden" />定义隐藏字段,隐藏字段对用户是不可见的。隐藏字段通常会储存一个默认值,他们的值可以通过JavaScript进行修改
非常需要注意的一个,使用范围很广。通常成为隐藏域:如果有一个非常重要的信息需要提交到下一页,但有无法明示的时候使用。
hidden中value的值最有用。name用来引于JavaScript引用。
<form name="form1">
your hidden info here:
<input type="hidden" name="yourhiddeninfo" value="baidu.com" />
</form>
<script>
alert("隐藏域的值是 "+document.form1.yourhiddeninfo.value)
</script>
alert出:隐藏域的值是baidu.com
..............................................................................................................................
<input type="checkbox" />定义复选框。允许用户在一定数目中选择一个或多个
属性有name,value,及特定属性checked(必须的)
最重要的是value值,提交到页面的是value值。name值可以不一样,但推荐使用一样的。
多条input语句组成多选框。
<form name="form1">
a:<input type="checkbox" name="checkit" value="a" checked /><br>
b:<input type="checkbox" name="checkit" value="b" /><br>
c:<input type="checkbox" name="checkit" value="c" /><br>
</form>
..............................................................................................................................
<input type="radio" />定义单选按钮
属性有name,value,checked.
name属性必须一样,否则不能多选一。提交到处理页的还是value的值。
<form name="form1">
a:<input type="radio" name="checkit" value="a" checked /><br>
b:<input type="radio" name="checkit" value="b" /><br>
c:<input type="radio" name="checkit" value="c" /><br>
</form>
..............................................................................................................................
<input type="image" />定义图像形式的提交按钮。点击图像就会提交表单数据。
属性有,src,alt,align.
src属性图像地址
align属性图像位置,建议使用css控制。
alt,图像替代文本.图像不显示时,依然可以提交。
<form name="form1" action="xxx.asp">
your Imgsubmit:
<input type="image" src="../blog/images/face4.gif" />
</form>
..............................................................................................................................
<input type="file" />定义用于上传文件
<form action="re.php" mathod="post" enctype="multpart/form-data">
your file:
<input type="file" name="yourfile" size="30" />
</form>
..............................................................................................................................
<select></select> <option></option>
<select>标签用于创建下拉菜单。有disabled,multiple,size,name属性。select标签可以不使用任何属性。
name属性规定select元素的名称。name属性用于对提交到服务器后的表单数据进行标识,或者用于JavaScript对表单引用。
disabled属性表示禁用该下拉菜单。
multiple属性表示可以选择下拉菜单的多个选项。windows系统通过ctrl,mac通过command来实现。此时默认默认浏览器会显示4个选项。
size属性表示显示的下拉菜单可见选项的个数,默认为1。(设为2的时候,谷歌浏览器会显示4,why??)
<option>标签定义下拉菜单中的一个选项。浏览器将<option>作为<select>标签的菜单或是滚动列表中的一个元素显示。option元素位于select元素内部,与select元素配合使用,否则该标签没有意义。
option标签可以不使用任何属性,但是一般会使用value属性,此属性的值为提交到处理页的内容。如果不设置value的值,提交<option></option>之间的内容,之间的内容为显示在浏览器上的内容
disabled属性表示禁用的option选项。其余的option选项还是可以正常使用。
selected属性,定义默认显示的选项。
<select >
<option value="河南省">河南省</option>
<option value="河北省">河北省</option>
<option value="河北省" checked>广东省</option>
<option value="河北省" disabled>广西省</option>
</select>
..............................................................................................................................
<textarea></textarea>
<textarea> 标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。
注释:在文本输入区内的文本行间,用 "%OD%OA" (回车/换行)进行分隔。
属性有cols,rows,disabled,name,readonly
cols规定文本的可见宽度。
rows规定文本的可见高度。
diabled禁用该文本。
name用于表单时提交到服务器的标识,也可以用于客户端JavaScript的引用标识。
readonly表示只读,不能被修改。
..............................................................................................................................
<label></label>
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签属性只有一个for 属性,该属性必须要与相关元素的 id 属性相同。
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="1" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="0" />
</form>
单选按钮显示的是label中的Male,鼠标点击Male时即可选中。input标签中需要设置id属性。
..............................................................................................................................
HTML:form表单总结,input,select,option,textarea,label的更多相关文章
- ajax form表单提交 input file中的文件
ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
- input file 在开发中遇到的问题 类似ajax form表单提交 input file中的文件
最近在做项目的过程中遇到个问题,在这里做个记录防止日后忘记 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为 ...
- 前端 HTML form表单标签 input标签 type属性 file 上传文件
加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...
- 判断form表单每个input字段是否有内容
//---------------------------------------------------input失去焦点时判断是否有值 btn_click: function () { //inp ...
- form表单 一个input时 回车自动提交
问题描述 form表单中,如果当前表单只有一个input输入框时,单击回车会自动提交当前表单. 解决方案 在当前form表单中添加一个隐藏的input, <input style="d ...
- 常用6种type的form表单的input标签分析及示例
<input> 标签用于搜集用户信息. 根据不同的 type 属性值,输入字段拥有很多种形式.输入字段可以是文本字段.复选框.掩码后的文本控件.单选按钮.按钮等等. 在这里博主介绍6中ty ...
- 前端 HTML form表单标签 input标签 type属性 radio 单选框
<input type="radio"> 单选框 适用于 选择性别按钮网页等 <!DOCTYPE html> <html lang="en& ...
- HTML之form表单和input系列
<form method="POST" action="/host"> <input class="c1" type=&q ...
- 前端 HTML form表单标签 input标签 type属性 重置按钮 reset
input type="reset" value="重置" reset重置 还原到默认状态 <!DOCTYPE html> <html lan ...
- 前端 HTML form表单标签 input标签 type属性 checkbox 多选框
多选框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
随机推荐
- uva 10474 Where is the Marble? 计数排序
题目给出一系列数字,然后问哪个数字是从小到大排在第几的,重复出现算第一个. 数据范围为10000,不大,完全可以暴力,sort不会超时. 但是由于以前做比赛时也遇到这种题目,没注意看数据范围,然后暴力 ...
- [置顶] 《算法导论》习题解答搬运&&学习笔记 索引目录
开始学习<算法导论>了,虽然是本大部头,可能很难一下子看完,我还是会慢慢地研究的. 课后的习题和思考有些是很有挑战性的题目,我等蒻菜很难独立解决. 然后发现了Google上有挺全的algo ...
- [原创] Web UI 自动化日期控件的处理
序 在构建自动化套件的过程中,日期操作是一件很重要也很频繁的事情.有的日期控件的div层级结构复杂,同一个类型的日期控件在多个子系统中的表现形式也大相径庭.多数工程师为了避免重复的工作,会封装抽象一个 ...
- 重构20-Extract Subclass(提取父类)
当一个类中的某些方法并不是面向所有的类时,可以使用该重构将其迁移到子类中.我这里举的例子十分简单,它包含一个Registration类,该类处理与学生注册课程相关的所有信息. public class ...
- 【WinAPI】Windows Message 枚举常量收集
namespace WindowsUtilities { public enum WindowsMessages : int { WM_NULL = 0x0000, WM_CREATE = 0x000 ...
- Ubuntu(16.04) 下如何修改(安装)arm-linux-gcc编译器
ubuntu下如何修改(安装)arm-linux-gcc编译器 将gcc解压到根目录 sudo tar xjf arm-linux-gcc-4.3.2.tar.bz2 -C / 查看原来的环境变量 e ...
- oracle PL/SQL(procedure language/SQL)程序设计--控制结构(if else )
IF逻辑结构:IF-THEN-END IFIF-THEN-ELSE-END IFIF-THEN-ELSIF-END IF 语法 IF condition THEN statements;[ELSIF ...
- 社区APP “钱途”漫漫
花样年曾宣称:2013年“彩生活”物业品牌收入1.85亿,毛利率超过40%:万科万客会APP.龙湖物业APP……大量房地产企业依托物业企业,纷纷瞄准移动互联网.云计算.物联网等高新科技为基础的物业服务 ...
- JQ笔记
参数形式$("input:text",document.forms[0])选择form[0]所有input=text$("<p>123</p>&q ...
- <转>梳理:提高前端性能方面的处理以及不足
原文来自:张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 二.最最基本的 CSS顶部, JS底部 YUI compressor/Gzip CDN 有 必要的CSS Spr ...