1.表单是Web页面上负责用户输入与服务器端数据交互的最基础方式
HTML中表单可以用来搜集用户各种类型的输入信息。表单实际上是包含表单元素的区域，在这个区域中的各种元素的输入信息最终都将通过表单提交到程序脚本中。例如常见的有用户登录、注册、发布文章等等，都是通过表单提交到动态程序进行处理的。
本文主要讲述表单和表单的元素.
表单的区域是使用
<form>标签定义表单的范围，在<form></form>中的元素的值会被通过这个表单提交到对应的地址中。
2. 表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
①<input>标签
一般表单内多以使用<input>标签收集用户的输入信息，其输入类型是由type决定的。
常见的输入类型有文本框、单选按钮、复选框、下拉菜单等等。
②文本框
文本域可以为用户提供输入文字的功能，浏览器会将文本域解译为一个矩形框，用户将光标移动到该框体，并点击即可将光标移动到框体内。用户可以在表单中键入字母、数字等内容。
文本框的定义方法是在<input>标签中为type属性设置text值
<input type="text">
③单选按钮
单选按钮多数情况下出现在用户注册时录入资料的选项中，该类型多用于只允许用户选择一项结果时使用。方法是让name取值相同
单选按钮的定义方法是在<input>标签中将type属性的值设置为radio
<input type="radio">
④复选框
复选框可让用户勾选某些对应的一个或多个选项。常见的一般是在用户登录时，为用户提供记住登录帐号等功能。也可以在用户调查的页面中，搜集用户的多项意见。
复选框定义方法是在<input>标签中将type属性的值设置为checkbox
如果想让复选框默认被选中,可以设置checked的值为checked
<input type="checkbox" checked="checked" >
⑤下拉菜单<select>
下拉菜单在信息选择上与单选类似，但是下拉菜单可以容纳更多的信息。并且下拉菜单在选择菜单值后可以执行额外的脚本。
下拉菜单以<select>为起始标签，在select标签中的每一个<option>标签都是下拉菜单中的一个值。
<select> <option value="bmw">宝马</option> <option value="auto" selected>大众</option> <option value="audi">奥迪</option><input type="submit"> </select>
⑥提交按钮
提交按钮是每个表单的必要组成部分。用户将对应的信息录入完毕后，需要通过点击提交按钮触发动作，将表单的值提交到下一个页面。当<form>标签中的action属性设置了对应的提交地址时，提交按钮会将该表单中获得的所有数据提交到这个地址的页面中。
提交按钮的定义方法是在input标签中将type的值设置为submit。
<input type="submit">
其他按钮
<input type="button" value="Button" /> 按钮 <input type="reset" value="Reset" /> 重置按钮
附一个我的练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>form表单元素</title>
</head>
<body>
<div class="login">
<form action="/getinfo" method="get">
姓名:
<input type="text" name="username" value="用户名"><br> 密码:
<input type="password" name="password" value="123456"><br>性别:
<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女<br> 取向:
<input type="radio" name="quxiang">男<input type="radio" name="quxiang" checked="checked">女<br> 爱好:
<input type="checkbox" name="hobby" value="games"> LOL
<input type="checkbox" name="hobby" checked="checked" value="travel"> 旅游
<input type="checkbox" name="hobby" checked="checked" value="read"> 看书<br> 评论:
<textarea rows="5" cols="30" placeholder="ddd">
</textarea><br> 我的车:
<select>
<option value="bmw">宝马</option>
<option value="auto" selected>大众</option>
<option value="audi">奥迪</option>
</select>
<input type="submit">
</form>
</div>
</body>
</html>
网友评论