码迷,mamicode.com
首页 > Web开发 > 详细

Web开发——HTML基础(HTML表单)

时间:2018-10-14 13:59:48      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:处理程序   taint   用户输入   enc   _for   列表   收集   注释   元素   

  参考:http://www.w3school.com.cn/html/html_forms.asp

  HTML 表单用于搜集不同类型的用户输入。

1、<form> 元素

  HTML 表单用于收集用户输入。

  <form> 元素定义 HTML 表单:

1.1 <input> 元素

  <input> 元素是最重要的表单元素。

  <input> 元素有很多形态,根据不同的 type 属性。

  这是本章中使用的类型:

类型描述
text 定义常规文本输入。
radio 定义单选按钮输入(选择多个选择之一)
submit                           定义提交按钮(提交表单)                                                                                                                                                                                                                                             


1.2 文本输入

  <input type="text"> 定义用于文本输入的单行输入字段:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12 
13         <form>
14             Text input 1:<br />
15             <input type="text" name="textinput1"></input>
16             <br />
17             Text input 2:<br />
18             <input type="text" name="textinput2"></input>
19         </form>
20         
21         <br />
22         <form>
23             Text input 3:
24             <input type="text" name="textinput3"></input>
25             <br />
26             Text input 4:
27             <input type="text" name="textinput4"></input>
28         </form>
29         
30     </body>
31 </html>

  输出结果:

Text input 1:

Text input 2:

 

Text input 3:
Text input 4:

   注释:表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。

1.3 单选按钮输入

  <input type="radio"> 定义单选按钮。

  单选按钮允许用户在有限数量的选项中选择其中之一:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12 
13         <form>
14             <input type="radio" name="sex" value="male" checked>Male</input>
15             <br />
16             <input type="radio" name="sex" value="female">Female</input>
17         </form>
18         
19     </body>
20 </html>

  输出结果:

Male
Female 

1.4 提交按钮

  <input type="submit"> 定义用于向表单处理程序(form-handler)提交表单的按钮。

  表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

  表单处理程序在表单的 action 属性中指定:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <!--<meta charset="utf-8">-->
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9     </head>
10     
11     <body>
12 
13         <form action="action_page.php">
14             Text input 1
15             <input type="text" name="textinput1" value="Mickey"></input>    <!--value为显示默认值-->
16             <br />
17             Text input 2
18             <input type="text" name="textinput2" value="Mouse"></input>     <!--value为显示默认值-->
19             <br /><br />
20             <input type="submit" value="Submit"></input>
21         </form>
22         
23     </body>
24 </html>

  输出结果:

Text input 1
Text input 2

 

2、HTML Form 属性

  HTML <form> 元素,已设置所有可能的属性,是这样的:

  实例:

1 <form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
2 ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
3 .
4 form elements
5  .
6 </form> 

  下面是 <form> 属性的列表:

属性描述
accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。
action 规定向何处提交表单的地址(URL)(提交页面)。
autocomplete 规定浏览器应该自动完成表单(默认:开启)。
enctype 规定被提交数据的编码(默认:url-encoded)。
method 规定在提交表单时所用的 HTTP 方法(默认:GET)。
name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate 规定浏览器不验证表单。
target                             规定 action 属性中地址的目标(默认:_self)。                                                                                                                                                                                                                

 

3、<select> 元素(下拉列表)

  <select> 元素定义下拉列表:

  <option> 元素定义待选择的选项。

  列表通常会把首个选项显示为被选选项。

  您能够通过添加 selected 属性来定义预定义选项。

 

  输出结果:

 

 

Web开发——HTML基础(HTML表单)

标签:处理程序   taint   用户输入   enc   _for   列表   收集   注释   元素   

原文地址:https://www.cnblogs.com/zyjhandsome/p/9785718.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!