（六）HTML 表单与输入

表单

　　表单是一个包含表单元素的区域,允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

　　表单使用表单标签（<form>）定义。

格式：

 

form>
...
  input 元素
...
</form>

输入

　　多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

 

文本域（Text Fields）　

复制代码
 1 <html> 
 2         <head>
 3         </head>
 4         <body>
 5         <form>
 6         姓名:<input type="text" name="name"/><br/>
 7         性别:<input type="text" name="sex"/><br/>
 8         </form>
 9         </body>
10 <html/>
复制代码

在浏览器中运行的结果：

　　

单选按钮（Radio Buttons）  注意：只能从中选择一项

复制代码
 1 <html> 
 2         <head>
 3         </head>
 4         <body>
 5         <form>
 6         姓名:<input type="text" name="name"/><br/>
 7         性别:<input type="text" name="sex"/><br/>
 8         爱好：<br/>
 9         //单选按钮type为radio，name一致是为确保只能从中选择一项
10         <input type="radio" name ="a" value="a"/>看书<br/>   
11         <input type="radio" name ="a" value="b"/>玩耍<br/>
12         <input type="radio" name ="a" value="a"/>划船<br/>
13         <input type="radio" name ="a" value="b"/>看电影<br/>       
14         </form>
15         </body>
16 <html/>
复制代码

在浏览器中运行的答案

　　

复选框（Checkboxes）

复制代码
 1 <html> 
 2         <head>
 3         </head>
 4         <body>
 5         <form>
 6         姓名:<input type="text" name="name"/><br/>
 7         性别:<input type="text" name="sex"/><br/>
 8         爱好：<br/>
 9         <input type="radio" name ="a" value="a"/>看书<br/>
10         <input type="radio" name ="a" value="b"/>玩耍<br/>
11         <input type="radio" name ="a" value="a"/>划船<br/>
12         <input type="radio" name ="a" value="b"/>看电影<br/>       
13         个人评价：<br/>
14         <input type="checkbox" name ="a"/>i love huahua<br/>
15         <input type="checkbox" name ="b"/>i love ruruhao<br/>
16         <input type="checkbox" name="c"/>i love life<br/>
17         <input type="checkbox" name="d"/>i love all<br/>
18 </form>
19         </body>
20 <html/>
复制代码

 

在浏览器中运行的结果：

　　

表单的动作属性（Action）和确认按钮

　　当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

复制代码
 1 <html> 
 2         <head>
 3         </head>
 4         <body>
 5         <form name="input action="html_form_action.asp" method="get">
 6         姓名:<input type="text" name="name"/><br/>
 7         性别:<input type="text" name="sex"/><br/>
 8         爱好：<br/>
 9         <input type="radio" name ="a" value="a"/>看书<br/>
10         <input type="radio" name ="a" value="b"/>玩耍<br/>
11         <input type="radio" name ="a" value="a"/>划船<br/>
12         <input type="radio" name ="a" value="b"/>看电影<br/>       
13         个人评价：<br/>
14         <input type="checkbox" name ="a"/>i love huahua<br/>
15         <input type="checkbox" name ="b"/>i love ruruhao<br/>
16         <input type="checkbox" name="c"/>i love life<br/>
17         <input type="checkbox" name="d"/>i love all<br/>
18         <input type="submit" value="i love you">
19 </form>
20         </body>
21 <html/>
复制代码

在浏览器中运行的结果：

　　

 

posted @ 2015-10-22 17:23  花花妹子。  阅读(215)  评论(0)    收藏  举报