定义表单元素,元素表单个

HTML(5)表单元素以及对各个表单元素的name、value属性的理解

我在学习表单元素的时候感觉很混乱，特别是 name value 这两个属性，没有真正理解它们是干什么的，所以需要梳理一下。

HTML表单元素主要有 form input select textarea button fieldset legend

HTML5新增的表单元素有三个 datalist keygen output

form元素定义HTML表单，收集用户输入。

属性主要有 action 和 method ；

action 定义在提交表单时执行的动作，向服务器提交表单的通常做法是使用提交按钮（type为 submit 的 input 元素）； 如果省略该属性，则action会被设置为当前页面 。

method 属性规定在提交表单时所用的HTTP方法（HTTP方法有GET和POST两种，这里只说一下两者的主要区别：GET方法会使表单数据在页面地址栏是可见的，而POST方法不可见，所以POST方法安全性更佳）。

input 元素很常用（为行内元素，在“去哪儿”找实习面试的时候被问到过，当时都答错......），根据不同的 type 属性，可以变化为多种形态。

type 的取值有 text radio checkbox password submit button ;HTML5又新增了 type 类型 email url search number range color date pickers（date month week...） ，这些新类型提供了更好的输入控制和验证。

对于 input 元素，除了 type 属性，常用的就是 name 和 value 属性：

name 属性----想要被正确地提交，每个输入字段必须设置一个 name 属性。

value 属性----为 input 元素设定值，对于不同的 type ， value 属性的含义也不同。

效果图如下

当选择“许嵩”，点击“提交”按钮后，看到页面地址栏里表单数据的内容如下图所示。

注意：单选钮的各个 name 属性值要完全一致，否则会不只选中一个选项

效果图如下

定义下拉列表，需要配合 option 使用， option 定义待选择的选项；通常会把首个选项显示为被选选项；可通过selected属性来定义预定义选项。

效果图如下：

当 value 的属性值是空的时候，会取 option 的内容值作为表单数据提交。

定义多行输入字段（文本域）

效果如下图

地址栏数据如下图所示。当文本域为空时，提交的表单数据也为空；改变文本域的值，再次提交，则表单数据也会相应的改变。

button 元素的 type 属性有三个可能的值 button submit 和 reset ；这里只介绍属性值 button

type 为 button 时，定义可点击的按钮

效果如下图

点击后出现

规定输入域的选项列表；需要配合 option 元素一起使用，该元素定义列表项；如需把datalist绑定到输入域，需要把输入域的 list 属性值设置为datalist的 id 值； option 元素必须要设置 value 属性。

效果图如下

当选择第三项，并点击"提交"按钮后，地址栏数据如下

提供一种验证用户的可靠方法。

keygen 元素是密钥对生成器（key-pair generator）。当提交表单时会生成两个键，一个是公钥，一个是私钥。私钥存储于客户端，公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。

目前浏览器对该元素糟糕的支持程度 不足 以使其成为有用的安全标准。

效果图如下

点击第一项并提交后，地址栏的数据为

用于不同类型的输出，如计算或脚本输出。

效果如下图

通过总结对这些元素的认识更加深刻了，所以要经常整理！

HTML中常用的表单元素

1、input 元素定义输入框，根据不同的?type?属性，可以变化为多种形态。例如：

input type=text表示文本输入框，input type=password表示密码输入框，input type=radio表示单选输入框，input type=checkbox表示复选输入框。

2、select?元素定义下拉列表；

3、option?元素定义待选择的选项；列表通常会把首个选项显示为被选选项。能够通过添加 selected 属性来定义预定义选项；

4、textarea?元素定义多行输入字段（文本域）；

5、button?元素定义可点击的按钮；

6、datalist?元素为 input 元素规定预定义选项列表；用户会在他们输入数据时看到预定义选项的下拉列表。

网页制作技巧之用CSS定义表单元素中的样式

如题，比如我要同时定义div1,div2,div3,div4的a:hover和a:link以及其他各种样式我用了例如.div1 div2 div3 div4和.div1,div2,div3,div4都不行，求高人指点。

表单 是用来向后台提交数据的，而HTML语言是做静态页面的，那么它定义 表单元素 有什么 意义呢？

表单也可理解为是一个车他是装着数据的，可以想后台提交也可异步，异步其实说的也就是向后台提交，但这更快速一点，

HTML是静态的，表单也是静态的，这没有什么不好理解，只是他可以暂时存储数据而已，这也是网页设计中最基本的交互！

html表单元素有哪些？

HTML中常用的表单元素包括：文本区域（TEXTAREA），列表框（SELECT），文本输入框（INPUT type=text），密码输入框（INPUT type=password），单选输入框（INPUT type=radio），复选输入框（INPUT type=checkbox），重置按钮、提交按钮、隐藏域、等等。

一、文本域input type="text" name="text" value="" /

二、密码域

密码跟文本框类似，但是在里面输入的内容显示为圆点。

input type="password" name="text" value="" /

三、单选按钮

男人:input type="radio" name="sex" value="male" / Malebr /

女人：input type="radio" name="sex" value="female" / Female

四、复选框

input type="checkbox" name="check1" value="" /

五、按钮

input type="button" value="确认" /

六、重置按钮

当点击重置按钮时，重置按钮所在的表单将全部清空，而其他表单不受影响。input type="reset" value="重置" /

七、提交按钮

当点击提交按钮时，浏览器将自动提交表单。input type="submit" value="提交" /

八、隐藏域

隐藏域在浏览器中并不显示，仅仅为保存一些不太重要的资料而存在。input type="hidden" value="我是一个隐藏域" /

九、上传域input type="file" value="" /

十、图片按钮input type="image" src="123.gif" /

十一、下拉列表select

option value="0"0/option

option value="1"1/option

option value="2"2/option

例如：

属性：disabled，可选值：disabled?，说明：规定禁用该下拉列表。 ?

十二、label

abel 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。例如，当将单选按钮放在label内。则点击label内的文字也会触发单选按钮，而不必只是点中小圆点。

例如：

labelinput type="radio" name="male" /男人/label/p

labelinput type="radio" name="male" /女人/label/p

十三、禁用（disabled）与只读（readonly）

禁用和只读属性。readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去。

禁用文本框：input type="text" disabled="disabled" /

只读文本框: input type="text" readonly="readonly" //form

十四、TextArea

十五、fieldset ? ?定义域

fieldset用于给表单元素分组，legend用于设置分组标题。

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签，这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮，包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

列举表单当中的常用表单元素，并指出其代表的含义

一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

表单标志的主要元素、属性如下：

form/form创建表单

select multiple name="name" size=""/select创建滚动菜单,size设置在需要滚动前可以看到的表单项数目

option 设置每个表单项的内容

select name="name"/select创建下拉菜单

option 设置每个菜单项的内容

textarea name="name" cols=40 rows=8/textarea创建一个文本框区域,列的数目设置宽度,行的数目设置高度

input type="checkbox" name="name"创建一个复选框,文字在标签后面

input type="radio" name="name" value=""创建一个单选框,文字在标志后面

input type=text name="foo" size=20 创建一个单行文本输入区域,size设置为字符串的宽度

input type="submit" value="name"创建提交(submit)按钮

input type="image" border=0 name="name" src="name.gif"创建一个使用图像的提交(submit)按钮

input type="reset"创建重置(reset)按钮