学习HTML5一周的收获3

[form]

1、两个属性

action:表单提交的服务器地址

method:数据使用的方法.get/post

>>>get和post的区别

get传参数使用URL传递，所有参数可见，不安全；get传参数量数据有限；

post传参数使用http请求传递，较安全，post可传大量数据

但是前者传递的速率大于后者

 

>>>URL传参数的形式，链接URL地址?name1=value1&name2=value2

 

2、input的常用属性

type:设置input的输入类型

name:给input输入框起名，一般情况下，name属性必不可少，因为，传递

数据时，使用name=value(输入内容)的形式传递

value:input输入框的默认值

placeholder:输入框的提示内容，当input有默认的value或者输入值时，

placeholder消失

 

3、input-type属性的常用属性值

text:文本输入框

password;密码输入框，输入内容默认显示小黑点

radio:单选框

使用时，value属性必填，提交时，提交为value中的默认值

radio/checkBox凭借name属性，确定是否同一组，name 相同为同组，只能选一个

使用checked="checked"属性，设置默认中选项

file:文件上传

使用accept="类型"，设置只能上传的文件类型，image/*任意格式图片

submit:提交按钮，将所有表单内容提交给后台服务器

reset:重置表单数据，将表单数据恢复到默认状态

image:图形提交按钮。跟submit一样，具有表单提交功能。

使用src属性，选择图片路径

button:普通按钮，没用

 

4、属性名等于属性值的情况

checked="checked" 设置radio或checkBox的默认选中项

multiple="multiple" 设置select控件为多选

selected="selected":设置select控件，默认选中的option选项

readonly="readonly" 设置为只读模式，不允许编辑。

 

5、【下拉选择控件 select】

① 写法：<select>

<option></option> //可以有N多个

</select>

② name属性，应该写在<select>上，所有选项只有一个name

③ multiple="multiple" 设置select控件为多选，可在界面使用Ctrl+鼠标，进行多选。一般不用。

④ option常用属性：

value="":当option没有value属性时，往后台传递的是<option></option>标签中的文字；

当option有value属性时，往后台传递的是value属性的值。

title="":鼠标指上后显示的文字。

selected="selected":默认选中。

⑤ <optgroup label="山东省"></optgroup> :用于将option标签进行分组，label属性表示分组名。

 

6、 【文本域 textarea】

① 写法：<textarea></textarea>

② 设置宽高style="width: 200px; height: 150px;" 自身有cols="" rows=""两个属性，但不常用

③ readonly="readonly" 设置为只读模式，不允许编辑。

④ style="resize: none;" 设置为宽高不允许修改。

⑤ style="overflow: ;" 设置当文字超出区域时，如何处理。

>>> 也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式。

>>> 常用属性值:hidden 超出区域的文字，隐藏无法显示

scroll 无论文字多少，均会显示滚动

auto 自动，根据文字多少自动决定是否显示滚动条（默认样式）

7、表格的边框与标题

<fieldset>表格的边框

<legend>联系方式</legend>表格的标题

。。。N多个表单元素(input/select/textarea)

</fieldset>

HTML5智能表单

H5新增input的form属性，用于指向特定form菜单的ID，实现input无需放在form标签中

，即可将表单进行提交

<form id="form1">

...

<input form="form1">

③ 新增input的属性：

Autocomplete：自动完成功能 根据之前输入过的内容在下次输入时根据以前的内容提示自动完成，

有两个属性值

许多浏览器自动开启

有两个属性值 off on

可以在<form>标签上设置Autocomplete,控制整张表单的自动完成开关，但是可以在个别input上单独设置，覆盖form的整体设置

Autofocus：自动获得焦点 autofocus="autofocus"

Form：所属表单

Required：必填 required="required"设置input必填

Pattern：验证input的模式

Placeholder：提示

转载于:https://www.cnblogs.com/zhang11424/p/6539256.html