什么是表单？
HTML 表单的功能：
- 常用于登记信息的输入，或搜集不同类型的用户输入。
- 表单用于向服务器传输数据。
HTML 表单元素：
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
<input> 元素元素有很多形态，根据不同的 type 属性。
<input type="text" name="name" id="name" class="txt"/>
文本域(Text fields) <input>元素
<p>请输入您的姓名：<br /><input type="text" name="name" id="name" class="txt"/></p>
<select>元素、<option>元素
简单的带有预选值的下拉列表，即预选值指预先指定的首选项。
<p>请选择你喜欢的颜色：<br /> <select name="color" id="color"> <option value="red">红</option> <option value="green">绿</option> <option value="blue">蓝</option> <option value="yellow">黄</option> <option value="cyan">青</option> <option value="purple">紫</option> </select></p>
表单单选按钮元素： radio元素
<p>请问你的性别是：<br /> <input type="radio" name="sex" id="male" value="male" class="rad" />男<br /> <input type="radio" name="sex" id="female" value="female" class="rad" />女</p>
表单复选框元素 ：checkbox元素
<p>请问你喜欢做些什么：<br /> <input type="checkbox" name="hobby" id="book" value="book" class="check" />看书 <input type="checkbox" name="hobby" id="net" value="net" class="check" />上网 <input type="checkbox" name="hobby" id="sleep" value="sleep" class="check" />睡觉</p>
文本域(Textarea)（多行文本输入控制，在文本域中，可写入的字符字数不受限制）
<p>我要留言：<br /> <textarea name="comments" id="comments" cols="30" rows="4" class="textarea"></textarea></p>
表单提交按钮元素 ：submit元素 class类选择器
<p><input type="submit" name="btnSubmit" value="Submit" class="btn" /></p>
form自身属性 ： action 、 method
1，action：表示当前表单中的内容提交给哪个页面进行处理
2，method:表示当前表单提交的方式，常见的有get和post方式，默认是get提交
<form method="post"> .......... </form>
<form method= "get"> 使用展现形式：
<form method = "post" > 使用展现形式：
<form> 的兼容性：
几乎所有的浏览器都支持<form>表单标签。
附一个简单的表单应用案例：
HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="information.css"/> <title>基础信息表单</title> </head> <body> <form method="post"> <p>请输入您的姓名：<br /><input type="text" name="name" id="name" class="txt"/></p> <p>请选择你喜欢的颜色：<br /> <select name="color" id="color"> <option value="red">红</option> <option value="green">绿</option> <option value="blue">蓝</option> <option value="yellow">黄</option> <option value="cyan">青</option> <option value="purple">紫</option> </select></p> <p>请问你的性别是：<br /> <input type="radio" name="sex" id="male" value="male" class="rad" />男<br /> <input type="radio" name="sex" id="female" value="female" class="rad" />女</p> <p>请问你喜欢做些什么：<br /> <input type="checkbox" name="hobby" id="book" value="book" class="check" />看书 <input type="checkbox" name="hobby" id="net" value="net" class="check" />上网 <input type="checkbox" name="hobby" id="sleep" value="sleep" class="check" />睡觉</p> <p>我要留言：<br /> <textarea name="comments" id="comments" cols="30" rows="4" class="textarea"></textarea></p> <p><input type="submit" name="btnSubmit" value="Submit" class="btn" /></p> </form> </body> </html>
对表单形式进行修改的CSS样式如下：
@charset "utf-8";
/* CSS Document */
form
{
width:250px;
height:350px;
border:1px dotted #aAAAAA;
padding:1px 6px 1px 6px;
margin:0px;
font:14px Arial, Helvetica, sans-serif;
}
input
{
color:#00008b;
}
input.txt
{
border:1px inset #00008b;
background-color:#ADd8e6;
}
input.btn
{
color:#00008b;
background-color:#add8e6;
border:1px outset #00008b;
padding:1px 2px 1px 2px;
}
select
{
width:80px;
color:#00008b;
background-color:#add8e6;
border:1px solid #00008b;
}
textarea
{
width:200px;
height:40px;
color:#00008b;
background-color:#add8e6;
border:1px inset #00008b;
}
以上知识是我在学习过程中了解到的关于表单的相关知识，我们可以相互交流，学习。
（文中部分图片来自网络，若有侵权，请联系修正）