HTML <form> 标签

标签：range   submit   包含   focus   mit   使用   w3c   let   提交   

表单

 

一. 表单form的两个重要属性

 

1.action 表示表单提交的服务器地址

 

2.method 表单提交数据的方式，有post和get两个可选值

 

3.[get和post的区别]

>>> get通过url传递数据，所有内容在url可以看到，而post无法看到。

>>> get传递数据不安全，而post传递数据安全。

>>> get能够传递的数据量是有限的，而且只能传递文本信息。post可以传递大量信息，并且可以传递图片、文件等其他内容。

>>>get的传输速度要比post快。

 

4.[get使用url传递数据的格式]

>>> http://url地址.html?name1=value1&name2=value2 百度搜索的时候用的get

>>> 用?表示参数传递的开始，多个参数之间用&符号链接，同一个参数用name来标识value。

当你使用百度搜索html时uml会变成这样：

https://www.baidu.com/s?wd=html&rsv_spt=1&rsv_iqid=0 我们可以看出百度搜索框的名字叫wd

>>> 所以使用表单时，input输入框的name属性一定不能省略。

>>> 如果省略input的name属性，那么这个input的数据不会往后台传送。

 

二. input的常用属性

 

1.type:声明input输入框是什么属性

 

2.name:给input输入框起名字。传递数据时，使用name=value的形式传递。

 

3.value:input输入框的默认值。

 

4.placeholder：输入框的提示文本。当输入框为空时，显示。当输入框有value时，消失。

 

 

三.type的常用属性

 

1.text:表示input为文本输入框，输入的内容正常显示。

 

2.password：表示input为密码输入框，输入的内容为小黑点。

 

3.submit:表示input会显示为提交按钮，点击可以提交整张表单。

 

4.radio:表示input为单选输入框，显示为单选空心圆圈

 

>>> radio标签的value属性不能省略，往后台传递值时传递的是value中的值。

>>> radio标签凭借name属性来判断是否为同一组标签，name相同为同一组，同一组当中只能选择一个。

>>> 使用checked="checked"可以设置默认选中项，这种属性名等于属性值的写法，可以省略属性值。例如：

性别

 

5.checkbox:表示复选框，其他要求与radio相同。

爱好

 

6.file:表示文件上传框，点击可以选择文件上传。

需要后台

 

7.disabled="disabled" 设置input禁用，一旦使用了disabled禁用的输入框，在传递数据时，将不在往后台传递。

 

8.hidden="hidden" 隐藏输入框，隐藏的内容依然可以向后台传递。

这时当我们提交表单时，hidden可跟着提交

四.select下拉选择区块

 

1.标签中有多个选项，用表示

 

2.一个组合只能有一个name,所以使用的时候需给标签起name，而不能给option起。

 

3.option标签，如果有value值，则传递数据时将传递value的属性值，如果没有value属性，则传递时讲传递标签中的文字。

 

4.option标签的 title属性表示 鼠标指向后显示的文字。

 

5.给option标签加上 selected 表示 默认选中项。

 

6.给select标签加 multiple 表示这个下拉框可以多选，但是这个属性几乎不用。

 

7.optgroup 用于所有的option标签进行分组，使用label表示组名

 

 

所以完整的select下拉结构如下：

111

222

333

444

五.textarea 文本域

 

1.文本域可以使用属性cols 和 rows 设定宽高，但是我们几乎不用。

我们使用style="height:50px;width:250px;"设定大小。

这是一个文本域

 

2.使用css样式style="resize:none;"设定文本域的大小不允许拖动和缩放。

 

3.使用属性readonly="readonly" 设置只读模式，不允许修改。

 

4.使用css样式 overflow 用于设置超出区域的文字如何显示

 

可选值有三个：

hidden：超出区域的文字默认直接隐藏，无法看到。

scroll：无论文字多少，都会显示水平和垂直方向的滚动条。

auto：默认效果，文字少的时候没有滚动条，文字多的时候自动显示垂直滚动条。

这里我们一般使用auto比较简单美观。

 

也可以使用overflow-x overflow-y 单独设置水平方向滚动条和垂直方向滚动条是否显示。

只显示垂直方向滚动条:

只显示水平方向滚动条:

 

六.  HTML5智能表单

1.h5为我们提供了input与form关联的信访室，并不要求input必须包含在form里面

  如果input在form外面，只要给form标签一个id，让input标签通过form属性关联这个id，即可以实现form与input的关联。

 

2.H5给我们提供了一系列新的input的type类型：

date number url email range color

 

3.H5 提供了input新属性：

 

placeholder：输入框默认提示内容

 

form：让表单外面的input关联表单id，实现input与form表单的关联

 

required:设置input为必填

 

 

autofocus:设置input自动获得焦点

光标自动指向用户名

 

 

autocomplete:关闭自动提示完成功能。此功能浏览器会默认开启，设置为off关闭，设置为on打开。

 

可以给form整张表单设置autocomplete属性，整张表单自动完成功能是否开启，如有个别的input，可以单独在设置。

 

w3c 万维网联盟

 

标签尽量语义话 项目列表 就用列表 标签 而不是用p标签 便于搜索引擎 搜索

调整样式统一用css  分离 内容和表现分离

font size＝7 ＝》 h1

1 内容结构和表现样式分离（ html 和 css）

 内容和行为分离（html 和 javascript）

2 html表现结构语义化

3 代码书写的规范 

标签全部用小写

html 必须闭合

属性值必须用引号引起来

标签必须正确嵌套，不可交叉

HTML

标签

标签：range   submit   包含   focus   mit   使用   w3c   let   提交   

原文地址：http://www.cnblogs.com/shihaojia/p/7071814.html