表单与表格总结

发布于 2016-12-07  8.33k 次阅读


表单:
基础语法:<form action="提给数据目标URL" methed="提交方式"></form>
form元素属性:
action:提交数据的目标URL
methed:提交数据的方法,有GET(默认值)与POST
name:设置表单名称,以便调用.
enctype:以后二年级学:浏览器发送给服务器数据所采用的编码格式.有三个值:
application/x-www-urlencoder(默认值),有缺点,不能上传文件.
multipart/form-data(用于上传文件到服务器)
text/plain不规范的编码,不建议使用.因为不同的浏览器对它理解不同.
* target:设置提交后的页面打开方式:_blank,_parent,_self,_top
* autocomplete:设置自动完成.让浏览器记住用户输入的数据,实现自动完成,默认为打开.
novalidate:设置是否执行浏览器数据有效性检查.(有些控件自动带有效性检测)

//使用get提交:
<form methed="get"></form>

//让浏览器关闭表单自动提示功能
<form autocomplete></form> 或 autocomplete="autocomplete"

form内部元素(常用的如input)属性:
type:设置input的类型,值
name:设置元素的名称,不设置则不会被提交
value:input元素的值(与name挂钩,name名=value值)
disabled:禁用input元素(获取不到光标)会被提交吗?
readonly:只读,不让修改
* autofocus:让元素自动获取到光标,可以直接输入内容
* autocomplete:单独设置一个元素的自动完成.
* form:特殊属性,设置让表单外的元素和指定的表单挂钩提交.(让一个表单外的元素被表单提交)
form属性用法:
英文名:<input type="text" name="en_name" form="form1" />
<form id="form1" action="" method="get">
<input type="submit" value="提交" />
</form>
maxlenth:允许最大输入的字符个数
placeholder:用于提示
pattern:用于验证的正则表达式.
测试自己验证:<input type="text" id="en_name" name="en_name" value="" form="form1" pattern="^[a-zA-Z][0-9a-zA-Z_-]{6,19}*@{1}[0-9a-zA-Z]+\.(com|net|cn|com\.cn|net\.cn)$" />

required:必填
list:智能下拉提示,它要与datalist-option结合使用
提示下拉:<input type="text" list="data1" />
<datalist id="data1">
<option value="www.baidu.com">百度</option>
<option value="www.qq.com">腾讯</option>
<option value="www.sina.com.cn">新浪</option>
<option value="www.baidu.com.cn">我准备申请的百度</option>
</datalist>

type属性汇总
text:一个普通单行本文框
password:密码文本框(它会隐藏字符以*显示)
submit,reset,button,image:提交按扭,重置按扭,普通按扭,图片提交按扭
hidden:隐藏控件
file:文件上传控件
checkbox,radio:复选框,单选框(以name属性来分组)
下面是新属性:
search:搜索框,(在某些浏览器键入内容会出现x标记取消)
color:颜色代码按扭
email,tel,url:邮件,电话号码,网址(都带验证功能)
number,range:只能输入数值的框,只能输入数值但有范围规定
date,month,time,week,datetime,datetime-local:以不同的方式显示日期或时间.

number,range:它用都有三个常用属性:max min step 最大值 最小值 跳动步长

表单其它元素
select-option:下拉列表 可以设置multiple属性,变成多选下拉框
它里面还可以用一个optgroup标签进行分组.

<select name="s2" multiple="multiple" size="高度值">
</select>

<select name="s1">
<optgroup label="国产">
<option value="1">苹果1</option>
<option value="2">苹果2</option>
</optgroup>
<optgroup label="进口">
<option value="3">苹果3</option>
<option value="4">苹果4</option>
</optgroup>
</select>
那下拉列表的默认值怎么设置?
<option value="4" selected>苹果4</option>

textarea:
属性:
name,form,readonly,disabled,maxlenth,
autofocus,placeholder,rows,cols,warp,required

讨论:required的用法:
它用在输入内的控件上,它就是必须输入只少一个.
比如我们把它用在多选框上呢?那它就必须钩选
验证:HTML5提供了最强大的属性:pattern="正则表达式"

我想要表单提交时不验证呢? novalidate

写一个最简单的验证手机号码或座机号码的正则:

把表单控件分组显示
<fieldset>
<legend>个人信息:</legend>
姓名: <input type="text"><br>
邮箱: <input type="text"><br>
生日: <input type="text">
</fieldset>