表单简单介绍

表单

• 作用：收集信息。
• 表单元素

Paste_Image.png

注册页面上能够填写的内容都是我们的表单元素。

• 作用： 用来收集用户的信息，将来提交到服务器。

Paste_Image.png Paste_Image.png

• 注意点：
  1. 如果想要多个radio或者checkbox组成一个选择集合，那么必须给每个radio以及checkbox都设置相同name属性。
  2. 如何给radio,checkbox 设置默认值呢？
  设置另外一个属性：checked="checked"
  3. 给下拉框设置默认值：selected="selected"
• Form标签：
  为什么点击reset没有效果呢？
  因为type=resert的按钮只能在Form之中才能起作用。
  -作用：用来管理页面上的表单元素，表单元素如果要起作用，必须要放在form标签中。
  属性action，作用是将所有的数据提交到action指定的页面
  注意：必须要给需要提交的标签加上name属性，不然提交之后将没有将数据显示在地址栏上！

演示：

-** 输入框**
用户名：<input type="text" value="张三">
-密码框
密码：<input type="password" value="123456">
-隐藏起来的输入框
<input type="hidden">
-单选框

// name="sex" 绑定一组
// checked="checked" 默认选中项```
- **复选框**
`爱好：<input type="checkbox"> 篮球 <input type="checkbox"> 足球 <input type="checkbox"> 羽毛球`
- **按钮**
`<input type="button" value="发送">`
- **重置按钮：将页面上修改的信息复原成原始状态**
`<input type="reset" value="重置">`
- **图片按钮：可以点击的图片**
`<input type="image" src="test.png">`
-**下拉框**

  <select>
      <option>1991</option>
      <option>1992</option>
      <option selected="selected">1993</option>
      <option>1994</option>
 </selected>

// selected="selected" 默认选中

- **文本域**

<textarea cols="30" rows="10"></textarea>
// cols 列 rows 行

**文章著作权归饥人谷_sunny和饥人谷所有，转载须说明来源**