HTML表单

表单是一个包含表单元素的区域。 表单能够包含 input 元素,textarea、select、fieldset、legend 和 label元素。 表单使用标签(<form>)定义。 表单用于向服务器传输数据。

• 表单的结构

<form name="form1" action="URL" method="get">
    用户名:<input type="text" name="uname" />
    密 码:<input type="password" name="passwd" />
</form>

• input类型

<input type="button" value="普通按钮" />

<input type="checkbox" value="复选框" />

<input type="color" value="拾色器" />

<input type="date" value="" />

<input type="month" value="" />选择月份

<input type="week" value="" />选择周

<input type="time" value="" />选择时间

<input type="email" value="" />Email

<input type="file" value="" />文件类型

<input type="hidden" value="" />隐藏域

<input type="image" src="" alt="Submit" />选择图片

<input type="number" value="" />数字键盘

<input type="password" value="" />输入密码

<input type="radio" value="" />单选按钮

<input type="range" min="0" max="10" step="1" />选择范围

<input type="reset" value="重置" />表单重置按钮

<input type="search" value="" />用于搜索

<input type="submit" value="提交" /> 提交按钮

<input type="tel" value="" />电话号码字段

<input type="text" value="" />输入框

<input type="url" value="http://baidu.com" />输入连接

• input属性

<input type="text" readonly />

<input type="text" maxlength />

<input type="text" disabled />

<input type=text autofocus />

---form---
<form action="demo_form.html" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">


---pattern---
<form action="demo_form.html">
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>

---list---
<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>


---min, max, step---
<input type="number" name="quantity" step="2" min="1" max="6">


---multiple---
选择图片: <input type="file" name="img" multiple>


---require---
<input type="text" name="usrname" required>

• textarea(多行文本框)

<textarea name="content" rows="5" cols="50"> </textarea>

• select(下拉列表框)

<select name="city">
  <option value="0">请选择</option>
  <option value="bj">北京</option>
  <option value="gz">广州</option>
</select>

• optgroup(用于组合选项的标签)

<select name="city">
  <option value="0">请选择</option>
  <optgroup label="主要城市">
      <option value="bj">北京</option>
      <option value="gz">广州</option>
  </optgroup>
</select>

• fieldset(组合标签)

<fieldset>
  <legend>基本资料</legend>
  <form></form>
</fieldset>

• lable

lable标签的作用是将输入项或选项及其标签文字关联起来

<input type="radio" name="sex" value="1" id="male" />
<label for="male">男</label>
<input type="radio" name="sex" value="0" id="female" />
<label for="female">女</label>