HTML基础0602-表单

<form>元素

HTML <form> 元素的常用属性

• action 属性定义提交表单时要执行的操作

  通常，当用户单击“提交”按钮时，表单数据将发送到服务器上的文件中

  在下面的例子中，表单数据被发送到名为 “action_page.php” 的文件

  <form action="/action_page.php">
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="Bill"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Gates"><br><br>
    <input type="submit" value="Submit">
  </form>
  

• target属性规定提交表单后在何处显示响应

  值	描述
  _blank	响应显示在新窗口或选项卡中。
  _self	响应显示在当前窗口中。
  _parent	响应显示在父框架中。
  _top	响应显示在窗口的整个 body 中。
  framename	响应显示在命名的 iframe 中。

  默认值为 _self，这意味着响应将在当前窗口中打开。

  此处，提交的结果将在新的浏览器标签中打开：

  <form action="/action_page.php" target="_blank">
  

• method属性指定提交表单数据时要使用的HTTP方法

  表单数据可以作为 URL 变量（使用 method="get"）

  或作为 HTTP post 事务（使用 method="post"）发送

  此例在提交表单数据时使用 GET 方法：

  <form action="/action_page.php" method="get">
  

  此例在提交表单数据时使用 POST 方法：

  <form action="/action_page.php" method="post">
  

<input>元素

<input>元素根据不同的 type 属性，可以变化为多种形态

输入类型

• <input type="text">定义供文本输入的单行输入字段
• <input type="password">定义密码字段
• <input type="submit">定义提交表单数据至表单处理程序的按钮
• <input type="radio">定义单选按钮
• <input type="checkbox">定义复选框
• <input type="button">定义按钮

H5新增输入类型

• <input type="number">用于应该包含数字值的输入字段

  <form>
    Quantity (between 1 and 5):
    <input type="number" name="quantity" min="1" max="5">
  </form>
  

• <input type="data">用于应该包含日期的输入字段

  根据浏览器支持，日期选择器会出现输入字段中

  <form>
    Birthday:
    <input type="date" name="bday">
  </form>
  也可以添加限制
  <form>
    Enter a date before 1980-01-01:
    <input type="date" name="bday" max="1979-12-31"><br>
    Enter a date after 2000-01-01:
    <input type="date" name="bday" min="2000-01-02"><br>
  </form>
  

• <input type="color">用于应该包含颜色的输入字段

  根据浏览器支持，颜色选择器会出现输入字段中

• <input type="range">用于应该包含一定范围内的值的输入字段

  根据浏览器支持，输入字段能够显示为滑块控件

• <input type="time">允许用户选择时间（无时区）

  根据浏览器支持，时间选择器会出现输入字段中

更多输入类型

输入属性

• name属性

  如果要正确地被提交，每个输入字段必须设置一个 name 属性

  本例只会提交 “Last name” 输入字段：

  <form action="action_page.php">
  First name:<br>
  <input type="text" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
  </form> 
  

• value 属性规定输入字段的初始值

  <form action="">
   First name:<br>
  <input type="text" name="firstname" value="John">
  </form> 
  

• readonly 属性规定输入字段为只读（不能修改）

  <form action="">
   First name:<br>
  <input type="text" name="firstname" value="John" readonly>
  </form> 
  

• disabled 属性规定输入字段是禁用的

  被禁用的元素是不可用和不可点击的

  被禁用的元素不会被提交

  <form action="">
   First name:<br>
  <input type="text" name="firstname" value="John" disabled>
  </form> 
  

H5新增输入属性

参考链接

<select>元素

<select>元素定义下拉列表

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

<option>元素定义待选择的选项

列表通常会把首个选项显示为被选选项

您能够通过添加 selected 属性来定义预定义选项

<option value="fiat" selected>Fiat</option>

<textarea>元素

<textarea>元素定义多行输入字段（文本域）

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

<button> 元素

<button> 元素定义可点击的按钮

<button type="button" onclick="alert('Hello World!')">Click Me!</button>