源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 3403|回复: 0

[CSS/Html] HTML中的表单元素介绍

[复制链接]

1169

主题

1557

帖子

8820

金币

超级版主

Rank: 8Rank: 8

积分
19323
发表于 2022-12-31 13:57:08 | 显示全部楼层 |阅读模式
这篇文章介绍了HTML中的表单元素,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧


表单元素概述

表单(Form),用于收集用户信息、提交用户请求等

处理过程

1、设计表单,并放入一些输入域
2、网站访问者在自己的计算机上填写上述输入域,并提交到服务器端
3、服务器处理数据并返回确认信息

其执行过程可以用下图表示:



语法

开始标记:必需
内容:表单域元素
结束标记:必需

主要属性

1、accept:文件上传所使用的MIME类型列表。
2、action:表单提交的地址,通常是包含服务方脚本的URL。如果为空则表示向当前页面提交。
3、method:指出表单数据提交的方式。有两个可能值:
GET:将表单数据附加在请求中的URL上(默认方式)。
POST:将表单数据封装在发送到服务器的请求中,比get方式安全。

作用:定义一个区域可以加入表单对象。

表单元素的基本结构



注意:get和post方式的区别

1、get是向服务器获取/查询数据的一种请求,post是向服务器提交数据的一种请求。

2、服务器端获取值的方法

get方式提交的数据,服务端使用request.QueryString获取变量的值。
post方式提交的数据,服务端使用request.Form获取数据。

3、安全性

get方式的请求是把参数数据队列附加在提交表单的ACTION属性所指的URL后面,值和表单内各个字段一一对应,以?分割URL和传输数据,参数之间以&分割,由于可以在URL里面看到参数数据,所以get方式不安全。
post方式是将表单内各个字段与其内容放置在HTML HEADER一起传送到ACTION属性所指的URL地址,在URL里面看不到参数数据,所以post方式比较安全。但是post方式执行效率要比get方式差一些。

4、大小

URL不存在参数上限的问题,HTTP协议规范没有对URL长度进行限制。这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器,如Netscape、FireFox等,理论上没有长度限制,其限制取决于操作系统的支持。
理论上讲,POST是没有大小限制的,HTTP协议规范也没有进行大小限制,说“POST数据量存在80K/100K的大小限制”是不准确的,POST数据是没有限制的,起限制作用的是服务器的处理程序的处理能力。

对于ASP程序,Request对象处理每个表单域时存在100K的数据长度限制。但如果使用Request.BinaryRead则没有这个限制。
由这个延伸出去,对于IIS 6.0,微软出于安全考虑,加大了限制。我们还需要注意:

1).IIS 6.0默认ASP POST数据量最大为200KB,每个表单域限制是100KB。
2).IIS 6.0默认上传文件的最大大小是4MB。
3).IIS 6.0默认最大请求头是16KB。
IIS 6.0之前没有这些限制。[参2]

总结:

1、get方式的安全性较post方式要差一些,所以,如果包含一些重要的信息,简易使用post数据提交方式。
2、在做查询统计的时候,使用get方式要更好一些;而在做数据的添加、修改或删除操作时,建议使用post方式提交数据。

表单控件元素

表单控件元素是包含在表单元素中具有可视化外观的HTML元素,用于访问者输入信息。

表单元素包括:

1、input:输入元素。
2、textarea元素。
3、select和option。
4、其他元素。

一、input元素

input元素包括:

文本域控件
口令控件
提交按钮和重置按钮
复选框控件
单选按钮
图像按钮和普通按钮
隐藏控件和文本选择控件
根据对type属性的不同取值,可以建立多种显示风格的表单控件,如文本区域、口领域、复选框等。

主要属性:

type属性:指定表单控件的类型,可取值text、password、submit、reset、CheckBox
radio、image、button、hidden、file。
value属性:指定表单控件的数据。
name属性:指定该控件的名称。

1、文本域控件

type="text"
作用:用于创建一个单行文本输入字段
值:由访问者自由输入的任何文本
与input元素的其他属性配合:
maxlength属性可以限制输入的字符数。
readonly属性可以让文本控件只读。

示例:



例如:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>表单元素</title>
  8. </head>
  9. <body>
  10.     <form method="POST">
  11.         <div>
  12.             名字:  <input type="text" name="姓名" value="填写名字">
  13.         </div>
  14.     </form>

  15. </body>
  16. </html>
复制代码

结果:



2、密码框

type="password"

作用;用于创建一个单行文本输入字段,并用*号屏蔽用户的输入。注意,当password输入的数据提交时并不以任何形式加密
value值:由访问者自由输入的任何文本作为默认值。

示例:



例如:
  1. <div>
  2.            密     码:  <input type="password">(至少包含6个字符)
  3. </div>
  4. <div>
  5.            确认密码:<input type="password">(至少包含6个字符)
  6. </div>
复制代码

结果:



3、复选框控件

type="checkbox"

作用:创建一个可以在选中和未选中之间切换的控件,当该表单提交给一个脚本进行处理时,每个被选取的复选框将返回一个与该复选框的名称相关联的值。

value值:选中该控件的值,可以是任意文本。(提交给服务器的是value的值)

与input元素的其它属性配合:

要以选取状态显示复选框,使用checked属性。

基本语法

<INPUT type="checkbox" name="cb2" value="talk">

建议:name和id的值一致

示例:
  1. <body>
  2.     <form name="form4" method="post" action="">
  3.       爱好:
  4.    <input type="checkbox" name="cb1" id="cb1" value="sports">
  5.    <!--for指的是input里面的id属性,把“运动”和复选框关联起来,实现点击“运动”两字也可以选中-->
  6.    <label for="cb1">运动</label>&nbsp;&nbsp;
  7.    <input type="checkbox" name="cb2" id="cb2" value="talk" checked="checked">
  8.    <label for="cb2">聊天</label>&nbsp;&nbsp;
  9.    <input type="checkbox" name="cb3" id="cb3" value="play">
  10.    <label for="cb3">玩游戏</label>
  11. </form>
  12. </body>
复制代码

例如:
  1. <div>
  2.             爱     好:  
  3.             <input type="checkbox" name="sports" id="sports" checked="checked"/>
  4.             <label for="sports"> 运动</label>
  5.             <input type="checkbox" name="talk" id="talk" />
  6.             <label for="talk"> 聊天</label>
  7.             <input type="checkbox" name="play" id="play" />
  8.             <label for="play"> 玩游戏</label>
  9. </div>
复制代码

结果:



4、单选按钮

type="radio"

作用:创建一个单选按钮,用于互斥地选择某种属性值
value值:文本,当提交form时,如果选中了此单选按钮,那么value就被发送到服务器
name:按钮分组
与input元素的其它属性配合:
要以选取状态显示复选框,使用checked属性

基本语法
<input type="radio" value="男" checked="checked">
注意:单选按钮的name属性的值必须相等,才能实现互斥的效果。

示例:
  1. <body>
  2.     <form name="form1" method="post" action="">
  3.    <BR>
  4.      性别:
  5.         <input type="radio" name="gen" class="input" value="1" checked="checked">男&nbsp;&nbsp;
  6.         <input type="radio" name="gen" class="input" value="2" >女&nbsp;&nbsp;
  7. </form>
  8. </body>
复制代码


例子:
  1. <div>
  2.             性     别:  
  3.             <input type="radio" name="sex" checked="checked">男
  4.             <input type="radio" name="sex">女
  5. </div>
复制代码

结果:



默认第一个被选中。

5、提交按钮

type="submit"

作用:传送表单数据给服务器端脚本或其他程序处理。
value值:按钮的标题文字。

基本语法:

<input type="submit" name="Submit" value="提交">

例如:
  1. <div>
  2.       <input type="submit" value="提交" />
  3. </div>
复制代码

结果:



6、重置按钮

type="reset"
作用:清空表单的内容并把所有表单控件设置为最初的默认值
value值:按钮的标题文字

基本语法:

<input type="reset" name="Reset" value="重置">

注意:重置不是清空,而是把表单控件的值重置为value属性中指定的初始值。

例如:
  1. <div>
  2.             <input type="submit" value="提交" />     
  3.             <input type="reset" value="重置" />
  4. </div>
复制代码

结果:



7、图像按钮

type="image"

作用:创建一个图像按钮,用于实现用户自定义的按钮风格。
src属性:指向按钮图片的位置。

基本语法:

<input name="image" type="image" src="B7.jpg">

8、普通按钮

type="button"

作用:用于控制执行客户端脚本。
value值:文本,显示在按钮上的文字。

基本语法:

<input name="verify" type="button" value="检查数据">

作用:

点击按钮,实现某种效果。

例如:
  1. <div>
  2.             <input type="submit" value="提交" />     
  3.             <input type="reset" value="重置" />     
  4.             <input type="button" value="按钮" />
  5. </div>
复制代码

结果:



9、隐藏控件

type="hidden"
作用:用于在表单中包含不希望用户看见的信息。
value值:文本,指派给控件的值,当用户提交表单时,该值与其他数据一起被发送。

基本语法:

<input type="hidden" name="hiddenField">

10、文件选择控件

type="file"
作用:上传文件

value值:文本,要上传的文件在本地的路径。

基本语法

<input type="file" name="file">

例如:
  1. <div>
  2.        <input type="file" />
  3. </div>
复制代码

效果:



选择文件后的效果:



二、textarea元素

作用:建立一个多行的文本输入区域。

基本语法:

<TEXTAREA name="textarea" cols="40" rows="6">文本框中的内容</TEXTAREA>

主要属性:

cols属性:指定文本区域的列数。
rows属性:指定文本区域的行数。
Name属性:指定该控件的名字
Readonly: 使文本区域不能编辑。

注意:cols和rows只表示页面显示的字符个数,如果超过,则会自动显示相应的横向和纵向滚动条。



例如:
  1. <div>
  2.             注册条款:
  3.             <textarea name="user" rows="3" cols="5">

  4.             </textarea>
  5. </div>
复制代码

结果:



三、select元素

列表框元素,用于建立一个选择菜单/列表,效果类似于C#中的ComboBox,实现下拉框的效果

语法:

开始标记:必需
内容:option元素
结束标记:必需

主要属性:

size属性:指定列表的高度。
multiple属性:指定数据项可以多选。
name属性:指定该控件的名字。

option元素

菜单项/列表项元素,代表一个选择菜单/列表的选项
语法:
开始标记:必需
内容:文本
结束标记:可选
主要属性:
value属性:指定选中该项提交的值。
selected属性:指定该项预先被选择。

基本语法
<select name="指定列表名称" size="行数">
<option value="可选项的值" selected>text</option>
<option value="可选项的值" >text</option>
......
</select>
说明:
size:确定列表中可同时看到的行数
selected:默认被选中的可选项
text:表示页面上显示的内容
value:提交给后台的值

示例:
  1. <div>
  2.             出生日期:
  3.             年:  <select >
  4.             <option value="" selected="selected">[选择年]</option>
  5.             <option value=0>2015</option>
  6.             <option value=1>2016</option>
  7.             <option value=2>2017</option>
  8.             <option value=3>2018</option>
  9.             </select>  
  10.             月:  <select >
  11.             <option value="" selected="selected">[选择月]</option>
  12.              <option value=0>一月</option>
  13.              <option value=1>二月</option>
  14.              <option value=2>三月</option>
  15.              <option value=3>四月</option>
  16.              <option value=4>五月</option>
  17.              <option value=5>六月</option>
  18.              <option value=6>七月</option>
  19.              <option value=7>八月</option>
  20.              <option value=8>九月</option>
  21.              <option value=9>十月</option>
  22.              <option value=10>十一月</option>
  23.              <option value=11>十二月</option>
  24.              </select>  
  25.             日:  <select >
  26.              <option value="" selected="selected">[选择日]</option>
  27.              <option value=0>1</option>
  28.              <option value=1>2</option>
  29.              <option value=2>3</option>
  30.              <option value=3>4</option>
  31.              <option value=4>5</option>
  32.              <option value=5>6</option>
  33.              <option value=6>7</option>
  34.              <option value=7>8</option>
  35.              <option value=8>9</option>
  36.              <option value=9>10</option>
  37.              <option value=10>11</option>
  38.              <option value=11>12</option>
  39.              <option value=12>13</option>
  40.              <option value=13>14</option>
  41.              <option value=14>15</option>
  42.              <option value=15>16</option>
  43.              <option value=16>17</option>
  44.              <option value=17>18</option>
  45.              <option value=18>19</option>
  46.              <option value=19>20</option>
  47.              <option value=20>21</option>
  48.              <option value=21>22</option>
  49.              <option value=22>23</option>
  50.              <option value=23>24</option>
  51.              <option value=24>25</option>
  52.              <option value=25>26</option>
  53.              <option value=26>27</option>
  54.              <option value=27>28</option>
  55.              <option value=28>29</option>
  56.              <option value=29>30</option>
  57.              <option value=30>31</option>
  58.             </select>
  59. </div>
复制代码

结果:



四、Label元素

语法:
开始标记:必需
内容:文本
结束标记:必需

如下图所示:



主要属性:

for:表示与该元素相联系的控件的ID值

作用:

将文本域控件联系在一起,将文本与控件联系在一起后,用户就可以单击这个文本,效果就同单击控件一样。

示例:
  1. <div>
  2.         <label for="userName">名     字:  </label>
  3.         <input type="text" name="username" id="userName">
  4. </div>
  5. <div>
  6.         <label>姓     氏:  <input type="text"></label>   
  7. </div>
复制代码

结果:



这样,点击名字或姓氏的时候,其后面的文本框会自动获取焦点。

五 、表单高级应用

1、只读属性

readonly:希望某个框内的内容只允许用户看,不能修改。

例如:给名字文本框增加value值,value值只能看,不能修改
  1. <div>
  2.         <label for="userName">名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;字:&nbsp;&nbsp;</label>
  3.         <input type="text" name="username" id="userName" value="请输入姓名" readonly="readonly">
  4. </div>
复制代码

结果:



2、禁用属性

disable:因没达到使用的条件,限制用户使用。

例如:
  1. <div>
  2.          <label>姓     氏:  
  3.                 <input type="text" value="王" disabled="disabled">
  4.          </label>   
  5. </div>
复制代码

结果:



从图中可以看出:姓氏文本框是灰色的,表示禁用。

到此这篇关于HTML表单元素的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持锦尚中国。

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-5-25 17:02 , Processed in 0.047655 second(s), 17 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明