form表单(H5复习)

表单是一个包含表单元素的区域
表单元素是允许用户在表单中输入的内容,比如:文本域textarea,下拉列表,单选框radio-button,复选框checkboxes
表单使用表单标签<form>来设置

HTML表单标签

<form>			定义供用户输入的表单
<input>			定义输入域
<textarea>		定义文本域(一个多行的输入控件)
<label>			定义input元素标签,一般为输入标题
<fieldset>		定义一组相关的表单元素,并使用外框包含起来
<legend>		定义<filedset>元素的标题
<select>		定义了下拉项列表
<optgroup>		定义选项组
<option>		定义了下拉列表的选项
<button>		定义了一个点击按钮
<datalist>		指定一个预先定义的输入控件选项列表
<keygen>		定义了表单的密匙对生成器字段
<output>		定义一个计算结果

<form>
<form>			元素包含一个或多个如下的表单元素
<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<lable>



属性:

form

accept-charset 规定服务器可处理的表单数据字符集
语法: character_set 表单提交时使用的字符编码列表,多个字符编码使用空格分隔
常用值 UTF-8 ISO-8859-1

action 规定当提交表单时间时向何处发送表单数据
语法:<form action="URL">
属性值:URL(可能的值:绝对URL,相对URL)

enctype 规定向服务器发送表单数据之前如何对其进行编码(适用于get=“post”)时
属性值:
application/x-www-form-urlencoded
默认。在发送前对所有字符进行编码（将空格转换为 “+” 符号，特殊字符转换为 ASCII HEX 值）。
multipart/form-data
不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
text/plain
将空格转换为 “+” 符号，但不编码特殊字符。

method 规定用于发送表单数据的HTTP方法
属性值:get post
关于 GET 的注释：
将表单数据以名称/值对的形式附加到 URL 中
URL 的长度是有限的（大约 3000 字符）
绝不要使用 GET 来发送敏感数据！（在 URL 中是可见的）
对于用户希望加入书签的表单提交很有用
GET 更适用于非安全数据，比如在 Google 中查询字符串
关于 POST 的注释：
将表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中）
没有长度限制
通过 POST 提交的表单不能加入书签

target 规定在何处打开action URL
属性值:
_black 在新窗口/选项卡打开
_self 在同一框架中打开
_parent 在父框架中打开
_top 在整个窗口中打开
framename 在指定的iframe中打开

autocomplete 规定表单是否应该启用自动完成功能
语法<from autocomplete="on|off">
属性值:
on 默认。规定启用自动完成功能。浏览器会基于用户之前键入的值自动完成值。
off 规定禁用自动完成功能。用户必须在每次使用时输入值到每个字段中，浏览器不会自动完成输入。

name 规定表单的名字
属性值: text 规定表单的名字

novalddate 规定当提交表单时不对表单数据进行验证
语法<form novaildate>

input

accept 属性规定了文件上传提交的服务器接收的文件类型(只针对type=“file”>
语法
<input accept='audio/|video/|image/|MIME_type
属性值
audio/ 接收所有的声音文件
video/* 接收所有的视频文件
image/* 接收所有的图像文件
MIME_type 一个有效的mime类型,不带参数,

alt 属性定义图像输入的替换文本(只针对type=“image”)

autocomplete 属性规定元素输入字段是否应启用自动完成功能
默认为no

autofocus 属性规定当页面加载时元素应自动获取焦点
语法:

<input autofocus>

checked 属性规定在页面加载时应该被预先选定的元素.(只针对type="checkbox"或者type=“radio”)
语法:<input checked>

disabled 属性规定应该禁用的元素
语法<input disabled>

form 属性规定元素所属的一个或多个表单
语法:<input form="form_id">
属性值:
form_id 规定元素所属的一个或多个列表的id列表.以空格分隔
example:

<form id="formId">
</form>
<!--此input元素仍属于此form表单-->
<input form="formId">

formaction 属性规定当表单提交时,处理输入控件的文件的URL(只适合type="submit"和type=“image”)
即formaction属性覆盖form元素的action属性
语法

<input formaction="URL">

formenctype 规定当表单数据提交到服务器时如何编码(只适合type="submit"和type=“image”)

formmethod 规定发送表单数据到action URL的HTTP方法(此方法只适合type="image"和type=“submit”)

formnovalidate formnovalidate 属性覆盖 form 元素的 novalidate 属性。

formtarget 规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type=“submit” 和 type=“image”)

height 规定input元素的高度(只针对type=‘image’)
语法:<input type="image" height="66">
注意不加单位,以像素计的单位

width 规定input元素的宽度(针对type=“image”)

list 引用datalist元素,其中包含元素的预定义选项
语法:<input list="datalist_id">
datalist_id 规定绑定到input元素的datalist的id

max 规定input元素的最大值
max与min属性配合使用,可创建合法值范围
max 和 min 属性适用于以下 input 类型：number、range、date、datetime、datetime-local、month、time 和 week。
语法:

<input max="number|date"> 

date:例:2000-01-23

min 属性规定<input>元素的最小值

maxlength 属性规定input元素中允许的最大字符数
语法:<input maxlength="number">

multiple 属性允许用户输入到<input>元素的多个值
multiple适用于email和file
语法<input multiple>

name 属性规定了<input>元素的名称
name属性用于在JavaScript中引用元素,或者在表单提交后引用表单数据
注意:只用设置了name属性的表单元素才能在提交表单时传递它们的值
语法:<input name="text">

pattern 属性规定用于验证<input>元素的值的正则表达式
语法:<input pattern="regexp">
属性值:regexp 规定用于验证<input>元素的正则表达式

placeholder 属性规定描述输入<input>字段预期值的简短提示信息(比如一个样本值或者预期格式的短描述)
语法

<input placefolder="text">

readonly 规定输入字段的值是只读的(常配合value使用)
语法:

<input readonly>

required 属性规定必须在提交表单之前填写输入字段
语法:

<input required>

size 属性规定以字符数计的<input>元素的可见宽度(用来设置样式)
语法:

<input size="number">

src 用于type=“image”

step step属性规定input合法的数字间隔
step 属性规定 input 元素的合法数字间隔。
实例：如果 step=“3”，则合法数字应该是 -3、0、3、6，以此类推。
提示：step 属性可以与 max 和 min 属性配合使用，以创建合法值的范围。
注意：step 属性适用于下面的 input 类型：number、range、date、datetime、datetime-local、month、time 和 week。
语法:

<input step='2'>

value 指定<input>元素value的值
value属性对于不同的input类型用法也不同
对于button reset submit类型-定义按钮上的文本
对于text,password,hidden类型-定义输入字段的初始(默认)值
对于checkbox,radio,image类型,定义与input元素相关的值,当提交表单时该值会发送到表单的action URL
注意：value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的
注意：value 属性不适用于 <input type="file">
语法:

<input value="text">

type 属性规定要显示的<input>元素的类型
type属性默认是text
语法:

<input type="value">

属性值:

button 				定义可点击的按钮
checkbox			定义复选框
radio				定义单选按钮(多个单选按钮的name要相同)
color				定义拾色器
date				定义date控件(包括年月日,不包括时间)
datetime			定义date控件和time控件(包括年月日时分秒几分之一秒,基于UTC时区)
datetime-lacal		定义date和time控件(包括年月日时分秒几分之一秒,不带时区)
time				定义输入时间的控件(不带时区)
month				定义month和year控件(不带时区)
week				定义week和year控件(不带时区)
email				定义用于Email地址的字段
file				定义文件选择字段的浏览按钮,供文件上传
hidden				定义隐藏输入字段
image				定义图像作为提交按钮
number				定义用于输入数字的字段
password			定义密码字段(字段中的字符会被遮挡)
range				用于精度值不重要的输入数字的控件(比如slider控件)
reset				定义重置按钮(重置所有表单值为默认值)
search				用于输入搜索字符串的文本字段
submit				定义提交按钮
tel					定义用于输入电话号码的字段
text				默认,定义一个单行的文本字段(默认宽度为20个字符
url					定义用于输入的URL字段

textarea

属性:
autofocus 规定当页面加载时,文本区域自动获取焦点
语法

<textarea autofocus>

cols 规定文本区域内可见的宽度(列数)
语法:

<textarea cols="number">

rows 规定文本区域内可见的行数
语法:

<textarea rows="number">

disabled 规定禁用文本区域
语法:

<textarea disabled>

form 规定文本区域所属的一个或多个表单
语法:

<textarea form=form_id>

maxlength 规定文本区域允许的最大字符数
语法:

<textarea maxlength="number">

name 规定文本区域的名称
语法:

<textarea name="text">

placeholder 规定一个简短的提示,描述文本区域期望的输入值
语法:

<textarea placeholder="text">

readonly 规定文本区域为只读
语法:

<textarea readonly>

required 规定文本区域是必需的/必填的
语法:

<textarea required>

wrap 规定当提交表单时,文本区域中的文本应该怎样换行
语法:

<textarea wrap="soft|hard">

属性值:
soft 在表单提交时,textarea中的文本不换行,默认
hard 在表单提交时,textarea中的文本换行,包括换行符,当使用hard时,必须指定cols属性