<form><textarea><label><fieldset><legend><optgroup><button>标签整理

<form>基本用法

表单用<form>定义，输入的内容用<input>定义

<form>first name:<input type="text" name="first name"/><br/>last name:<input type="text" name="last name"/></form>

<form>标签

<form><form action="xxxx.asp" method="get"><p>first name<input type="text" name="fname"/></p><p>last name<input type="text" name="lname"/></p><input type="submit" value="submit"/></form>

<form>属性

• action 规定当提交表单时向何处发送表单数据
• method 规定用于发送 form-data 的 HTTP 方法
• name 规定表单的名称
• target 规定在何处打开 action URL
• novalidate 提交表单时不需要验证(h5)
• enctype 规定在发送表单数据之前如何对其进行编码
• autocomplete 规定是否启用表单的自动完成功能(h5)
• accept-charset 规定服务器用哪种字符集处理表单数据

<form>中还能使用如下标签

<textarea>

多行的文本输入控件，可输入无限数量的文本，浏览器不允许 textarea 中存在另一个 textarea

<textarea> 属性

• autofocus 在页面加载后自动获得焦点(h5)

<textarea autofocus>我是一个文本输入控件，加载完成后浏览器会把焦点给我</textarea>

• cols和rows 规定文本框的行数和宽度

<textarea rows="3" cols="20">规定文本框的行数和宽度</textarea>

• disable 禁用文本框
  可以设置 disabled 属性，直到满足某些条件（比如选择一个复选框），才恢复用户对该文本区的使用。然后，可以使用 JavaScript 来清除 disabled 属性，以使文本区变为可用状态。

<textarea rows="2" cols="30" disabled="disabled">这是一个test。</textarea>

• form 设置位于表单之外的文本区域（但仍然是表单的一部分）(h5)

<form action="demo_form.asp" id="usrform">Name: <input type="text" name="usrname"><input type="submit"></form><textarea name="comment" form="usrform">输入文本...</textarea>

• maxlength 规定文本区域的最大字数

<textarea maxlength="50">Enter text here...</textarea>

• name 为textarea规定名称

<textarea rows="3" cols="20" name="W3School_text">这里的name规定了该元素的名称</textarea>

• placeholder 为文本框设置简单提示

<textarea placeholder="我是一个提示"></textarea>

• readonly 规定文本框为只读

<textarea rows="3" cols="20" readonly="readonly">这段话只能看不能修改</textarea>

• required 规定文本框必填（这是h5新增的属性，Internet Explorer 和 Safari 都不支持 required 属性）

<form action="demo_form.asp">  <textarea name="comment" required></textarea>  <input type="submit"></form>

• wrap 规定文本框内容的换行方式(soft和hard是h5）

<textarea wrap="soft/hard/virtual/physical"></textarea><!--soft 当在表单中提交时，textarea 中的文本不换行--><!--hard 当在表单中提交时，textarea 中的文本换行（包含换行符）。当使用 "hard" 时，必须规定 cols 属性--><!--virtual 客户端自动换行，但提交到服务端时不换行--><!--physical 客户端自动换行，提交到服务端也自动换行-->

<label>

标签为标签为 input 元素定义标注，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

<label>的属性

• for 规定 label 绑定到哪个表单元素

<form>  <label for="male">Male</label>  <input type="radio" name="sex" id="male" />  <br />  <label for="female">Female</label>  <input type="radio" name="sex" id="female" /></form>

• form 规定 label 字段所属的一个或多个表单(h5)

<form action="demo_form.asp" method="get" id="genderform"><label>Male<input type="radio" name="sex" id="male" value="male" /></label><br /><label>Female<input type="radio" name="sex" id="female" value="female"  /></label><input type="submit" value="提交" /></form><p>用于第一个单选按钮的 label 位于 form 元素之外，但仍然是表单的一部分。请尝试点击这个 label，可以切换到 radio 控件。</p><label for="male" form="genderform">Male</label></body></html>

<fieldset>

<fieldset>标签可将表单内的相关元素分组

<form>  <fieldset>    <legend>health information</legend>    height: <input type="text" />    weight: <input type="text" />  </fieldset></form>

<legend>

为分组的元素定义标题

<fieldset>的属性

• disable 禁用fieldset，内容不可填写

<form>  <fieldset disabled="disabled">    <legend>Personalia:</legend>    Name: <input type="text" /><br />    Email: <input type="text" /><br />    Date of birth: <input type="text" />  </fieldset></form>

• form 规定所属的一个或多个表单

<form action="/example/html5/demo_form.asp" method="get" id="iceform">你喜欢什么口味的冰激凌？<input type="text" name="icecream" /><br /><input type="submit" /></form><p>下面的 fieldset 位于 form 元素之外，但仍然是表单的一部分。</p><fieldset form="iceform">  <legend>Personalia:</legend>  Name: <input type="text" name="usrname"/><br />  Email: <input type="text" name="usrmail" /><br />  Date of birth: <input type="text" name="usrdate" /></fieldset>

• name 规定fieldset的名称

创建单选或多选菜单

<select>  <option value ="volvo">Volvo</option>  <option value ="saab">Saab</option>  <option value="opel">Opel</option>  <option value="audi">Audi</option></select>

<select>属性
- autofocus 在页面加载后自动获得焦点(h5)
- disable 禁用disable，不可填写内容
- form 规定所属的一个或多个表单(h5)
- multiple 规定可选择多个选项，需要借助windows-ctrl或- - mac-command多次选择
- size 规定可见选项的数目

<select multiple="multiple" size="2">  <option value ="volvo">Volvo</option>  <option value ="saab">Saab</option>  <option value="opel">Opel</option>  <option value="audi">Audi</option></select>

• name 规定名称
• required 规定文本必填
• selected 带有预选值的下拉列表

<html><body><form><select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat" selected="selected">Fiat</option><option value="audi">Audi</option></select></form></body></html>

<optgroup>

optgroup 元素用于组合选项

<select>  <optgroup label="Swedish Cars">    <option value ="volvo">Volvo</option>    <option value ="saab">Saab</option>  </optgroup>  <optgroup label="German Cars">    <option value ="mercedes">Mercedes</option>    <option value ="audi">Audi</option>  </optgroup></select>

optgroup属性

• label，为选项组规定描述(必须)
• disable，禁用该选项组，变得不可选

<button>

button 定义了一个按钮
在表单中慎用button，如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。
<button value="button">click me</button>

<button>的属性

• type 规定按钮的类型，始终为按钮规定 type 属性，IE默认值是button，其他浏览器的默认值是submit
  type有三个选择：button,submit,reset
  value 规定发送的值
  name 规定按钮的名称
  disable 禁用该按钮
• autofocus 加载完成后自动获得焦点(h5)
• form 规定按钮属于一个或多个表单(h5)
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
  以上formXXXX的属性覆盖form元素的相关属性，和type=”submit”配合使用