[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:提示