首页 > 代码库 > 学习HTML5一周的收获3

学习HTML5一周的收获3

2024-09-08 09:48:13   219人阅读

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

学习HTML5一周的收获3


联系
我们