Html表单--form标签

表单用于收集用户的输入信息。HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

1.form标签

form标签用来定义一个表单

<form action="" method="post">
       
        密码：<input type="password" name="password"></br>
        <label for="male">male</label>
        <input type="radio" name="ball" value="basketball" id="male">篮球
        <input type="radio" name="ball" value="football" checked="checked">足球
        <input type="radio" name="ball" value="volleyball">排球</br>

</form>

 action：action属性规定当提交表单时，向何处发送表单数据

 method：method属性定义提交表单的请求方式，http协议有两种发送求的方法，post和get，推荐用post

2、文本框：

    单行文本框：

<label>姓名：</label> <input type="text" name="name"></br>

 <label> 标签为 input 元素定义标注（标记）。

多行文本框：

<label>多行文本：</label><textarea name="desc" ></textarea>

3、密码框：

 <label>密码:</label><input type="password" name="passward">

4、单选框

 <input type="radio" name="ball" value="basketball" id="male">篮球
 <input type="radio" name="ball" value="football" checked="checked">足球
 <input type="radio" name="ball" value="volleyball">排球</br>

1. name属性相同的radio为一组，组内互斥
2. 当用户选择了一个radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务器
3. 设置checked="checked"属性设置默认被选中的radio

5、多选框

 <input type="checkbox" name="fruit" value="apple" checked="checked">苹果
 <input type="checkbox" name="fruit" value="pear">梨子
 <input type="checkbox" name="fruit" value="banana">香蕉
 <input type="checkbox" name="fruit" value="Watermelon">西瓜
 <input type="checkbox" name="fruit" value="pineapple">菠萝</br>

6、下拉列表

<select name="intersting">
        <option value="basketball">篮球</option>
        <option value="football" selected="seleced">足球</option>
        <option value="volleyball">排球</option>
 </select>

1. 下拉列表用到了两种标签，其中select标签用来定义下拉列表，而option标签设置列表项。
2. name属性在select标签中设置。
3. value属性在option标签中设置。
4. option标签的标签体是显示出来给用户看的，提交到服务器的是value属性的值。
5. 通过在option标签中设置selected="selected"属性实现默认选中的效果。

7、按钮

<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>                                                  
<button type="submit">提交按钮</button>
       

1. 普通按钮: 点击后无效果，需要通过JavaScript绑定单击响应函数
2. 重置按钮: 点击后将表单内的所有表单项都恢复为默认值
3. 提交按钮:点击后提交表单