首页 >邮件操作 > 内容

HTML表单

2023年2月11日 13:08

知识点：表单标签、表单元素

表单在网页中应用比较广泛，如申请qq账号、电子邮箱等，用户需要首先填写注册信息，然后才能提交；通俗讲，表单就是一个将用户信息组织起来的容器，将用户填写的内容放置在表单容器中，当用户单击提交按钮的时候，表单会将数据统一发送给服务器！

  • 表单的作用：实现人机交互。
  • 表单里的形式、种类：通过input标签实现，如输入文本信息的、密码显示为*的、点选性别的按钮、选填生日的……

1、表单标签及属性

在HTML中，使用<form>标签来实现表单的创建，该标签用于在网页中创建表单区域，属于容器标签，其他的表单元素标签需要在它的范围中才有效。

属性值描述
actionURL规定当提交表单时向何处发送表单数据。
methodget告诉浏览器将数据发送给服务器的方法
post
enctype默认值告诉浏览器在发送时如何对数据进行编码
multipart/form-data表单中包含文件上传控件时必须设为该属性
name自定义规定表单的名称

注意：表单的提交方法method属性值设为get时，表单内所有提交的元素值将以特定的格式拼接在action属性指定的动作后提交，在浏览器地址栏可以看到提交的元素名称及其值，所以get方式提交的表单最好不要涉及到与密码等安全相关的数据。

post方式提交的数据在地址栏不可见，更加安全，但涉及到与表单值相关的链接时却无法处理。

2、<input />标签

在所有表单元素中最常见的是<input />标签，根据设置不同的属性就可以在表单中添加相应的标签。INPUT标签包含了众多的用户输入控件。type属性指定表单元素的类型。

属性值描述
type此属性用以规定input元素的类型。
可用的选项就有text、password、checkbox、radio、submit、reset、file、hidden、image和button。
默认选项text
name自定义定义input元素的名称。（用以区分相同type的元素）
value自定义可选属性，规定input元素的初始值。
当type属性值为radio时，必须指定一个value初始值。
size数字定义输入字段的宽度。
如果type属性为text或password，则size以字符为单位。
其他输入类型，宽度以像素为单位。
maxlength数字用于指定可在text或password中输入的最大字符数，默认是无限大。
checkedchecked指定按钮都是被选中的属性，当输入类型是radio或checkbox时，使用该属性。

2.1 文本框text

文本框text是<input>标签中最常用，最常见的表单输入元素，它用于输入单行文本信息。

 
  1.    
        
       
       
        
         <form name="form1" action="" method="post">     <!--以form标签开始，代表一个表单区域的开始-->    
       
  2.    
        
       
       
        
         姓名：     <input type="text" name="username" size="10" value="jack" />     <br />     <!--input是一个单标签-->    
       
  3.    
        
       
       
        
         邮箱：     <input type="text" name="useremail" value="jack2018@qq.coom" />    
       
  4.    
        
       
       
        
         </form>

代码结果：

代码分析：①用form标签来进行表单的创建。②input标签是一个单标签。③注意不同标签的属性使用。

2.2 密码框password

当我们在输入密码的时候，不希望看到输入的数据被其他人看到，此时就可以使用密码框。密码框与文本框类似，区别在于，需要设置input标签的type属性为password，此时输入的字符全是以黑色实心圆点来显示的，从而实现了对数据的处理。

 
  1.    
        
       
       
        
         <!--密码框的使用-->    
       
  2.    
        
       
       
        
         <form name="form1" action="" method="post">    
       
  3.    
        
       
       
        
         账户：     <input type="text" name="username" size="10" value="jack" />     <br />    
       
  4.    
        
       
       
        
         密码：     <input type="password" name="pwd" />    
       
  5.    
        
       
       
        
         </form>

代码演示结果：

2.3 单选按钮radio

单选按钮控件用于一组互相排斥的值，组中的每个单选按钮控件应具有相同的name属性，用户一次只能选择一个选项。单选按钮的type属性值为radio，提交时的值为选中的单选按钮的value属性值。设置单选按钮默认选中时，需要设置其checked属性值为checked。

 
  1.    
        
       
       
        
         <!--单选按钮的使用-->    
       
  2.    
        
       
       
        
         <form name="form1" action="" method="post">    
       
  3.    
        
       
       
        
         账户：     <input type="text" name="username" size="10" value="jack" />     <br />    
       
  4.    
        
       
       
        
         密码：     <input type="password" name="pwd" />     <br />    
       
  5.    
        
       
       
        
         性别：     <input type="radio" name="gender" value="男" />男      <input type="radio" name="gender" value="女" checked="checked" />女    
       
  6.    
        
       
       
        
         </form>

代码演示结果：

代码分析：单选按钮一般用作单项选择时，注意有几个选项就要有几个input标签，但是这些input标签要使用同一个name属性。

2.4 复选框checkbox

复选框与单选按钮有些类似，只不过复选框允许用户选中多个选项，type属性值为checkbox。一旦用户选中某个复选框，在提交表单时，会将所有选中的复选框的value值一起提交。

 
  1.    
        
       
       
        
         <!--复选框的使用-->    
       
  2.    
        
       
       
        
         <form name="form1" action="" method="post">    
       
  3.    
        
       
       
        
         账户：     <input type="text" name="username" size="10" value="jack" />     <br />    
       
  4.    
        
       
       
        
         密码：     <input type="password" name="pwd" />     <br />    
       
  5.    
        
       
       
        
         性别：     <input type="radio" name="gender" value="男" />男      <input type="radio" name="gender" value="女" checked="checked" />女     <br />    
       
  6.    
        
       
       
        
         爱好：     <input type="checkbox" name="hobby" value="音乐" />音乐      <input type="checkbox" name="hobby" value="游戏" />游戏      <input type="checkbox" name="hobby" value="运动" />运动      <input type="checkbox" name="hobby" value="美食" />美食    
       
  7.    
        
       
       
        
         </form>

代码演示结果：

代码分析：复选按钮一般用作多项选择时，注意有几个选项就要有几个input标签，但是这些input标签要使用同一个name属性。

2.5 文件域 file

文件域的作用是实现文件的选择，在应用时只需要把type属性设为file即可。

 
  1.    
        
       
       
        
         <!--文件域的使用-->    
       
  2.    
        
       
       
        
         <form name="form1" action="" method="post">    
       
  3.    
        
       
       
        
         账户：     <input type="text" name="username" size="10" value="jack" />     <br />    
       
  4.    
        
       
       
        
         密码：     <input type="password" name="pwd" />     <br />    
       
  5.    
        
       
       
        
         性别：     <input type="radio" name="gender" value="男" />男      <input type="radio" name="gender" value="女" checked="checked" />女     <br />    
       
  6.    
        
       
       
        
         爱好：     <input type="checkbox" name="hobby" value="音乐" />音乐      <input type="checkbox" name="hobby" value="游戏" />游戏      <input type="checkbox" name="hobby" value="运动" />运动      <input type="checkbox" name="hobby" value="美食" />美食     <br />    
       
  7.    
        
       
       
        
         照片：     <input type="file" name="photo" />    
       
  8.    
        
       
       
        
         </form>

代码结果演示：

2.6 隐藏域 hidden

隐藏域是一种特殊的表单元素，在页面上无任何显示效果，主要用于将一些值隐藏的提交给服务器，隐藏域的属性值为hidden。隐藏域与we文本框的使用非常类似，但其在页面中不进行显示，所以也无法进行修改。

语法：<input type="hidden" name="名称" value="值" />

2.7 按钮

按钮在表单中经常用到，分别是提交按钮，重置按钮，普通按钮和图片按钮。提交按钮提交后会提交表单信息，type属性值为submit；重置按钮是将表单恢复到初始状态，type属性值为reset，普通按钮点击后完成的任务可自行编写程序处理，type属性值为button，图片按钮属性为image。

 
  1.    
        
       
       
        
         <!--按钮的使用：提交按钮submit，重置按钮reset，普通按钮button，图片按钮image-->    
       
  2.    
        
       
       
        
         <form name="form1" action="" method="post">    
       
  3.    
        
       
       
        
         账户：     <input type="text" name="username" size="10" value="jack" />     <br />    
       
  4.    
        
       
       
        
         密码：     <input type="password" name="pwd" />     <br />    
       
  5.    
        
       
       
        
         性别：     <input type="radio" name="gender" value="男" />男      <input type="radio" name="gender" value="女" checked="checked" />女     <br />    
       
  6.    
        
       
       
        
         爱好：     <input type="checkbox" name="hobby" value="音乐" />音乐      <input type="checkbox" name="hobby" value="游戏" />游戏      <input type="checkbox" name="hobby" value="运动" />运动      <input type="checkbox" name="hobby" value="美食" />美食     <br />    
       
  7.    
        
       
       
        
         照片：     <input type="file" name="photo" />     <br />    
       
  8.    
        
       
       
        
         <input type="hidden" name="id" value="1" />    
       
  9.    
        
       
       
        
         <input type="submit" value="提交" />    
       
  10.    
        
       
       
        
         <input type="reset" value="重置" />    
       
  11.    
        
       
       
        
         <input type="button" value="检查" name="check"/>    
       
  12.    
        
       
       
        
         <input type="image" src="add.png" name="add" />    
       
  13.    
        
       
       
        
         </form>

代码结果演示：

代码分析：图片按钮使用src属性来确定在按钮上显示的图片，也可以根据需要设置图片的宽高属性。

2.8 列表框

列表框主要是为了用户快捷，方便，正确的选择一些选项，并且节省页面的空间，它是通过<select>标签和<option>标签来实现的。<select>标签用于显示可供用户选择的列表，每个选项用<option>标签标示，<select>标签至少包含一个<option>标签。

<select>标签有两种显示形态，分别为下拉列表和列表框。当没有设置size属性，或size属性值为1时显示为下拉列表，仅可以选中一个选项。当size属性值大于1时显示为列表框，可设置multiple属性值为multiple允许其中多个选项。

下拉列表框中默认显示选中的选项，如无任何选中的选项，则显示第一个选项。当需要将某个选项设置为选中时，可设置该选项的selected属性值为selected。

 
  1.    
        
       
       
        
         <!--列表框使用范例-->    
       
  2.    
        
       
       
        
         <form name="form2" action="" method="post">    
       
  3.    
        
       
       
        
         <h3>最近一次购买的手机品牌：     </h3>    
       
  4.    
        
       
       
        
         <select name="lastbuy">    
       
  5.    
        
       
       
        
         <option value="苹果">苹果(iPhone)     </option>    
       
  6.    
        
       
       
        
         <option value="三星">三星     </option>    
       
  7.    
        
       
       
        
         <option value="华为">华为     </option>    
       
  8.    
        
       
       
        
         <option value="小米">小米     </option>    
       
  9.    
        
       
       
        
         <option value="其他">其他     </option>    
       
  10.    
        
       
       
        
         </select>    
       
  11.    
        
       
       
        
         <p>     </p>    
       
  12.    
        
       
       
        
         <h3>您正在关注的手机品牌：     </h3>    
       
  13.    
        
       
       
        
         <select name="like" size="5" multiple="multiple">     <!--当size属性大于1时，显示为列表框-->    
       
  14.    
        
       
       
        
         <option value="苹果">苹果(iPhone)     </option>    
       
  15.    
        
       
       
        
         <option value="三星">三星     </option>    
       
  16.    
        
       
       
        
         <option value="华为" selected="selected">华为     </option>     <!--设置selected属性，将默认显示该项-->    
       
  17.    
        
       
       
        
         <option value="小米">小米     </option>    
       
  18.    
        
       
       
        
         <option value="其他">其他     </option>    
       
  19.    
        
       
       
        
         </select>    
       
  20.    
        
       
       
        
         </form>

代码结果演示：

代码分析：①列表框有两种显示形态，通过设置size属性，来设置其显示形态（下拉列表和列表框）。②当size属性值大于1时，可通过multiple属性，允许选中多个选项。③通过selected属性，设置列表框的默认选中的选项。

2.9 多行文本域

当需要输入个人简介，文章内容等信息时，需要输入多行内容，此时需要使用到多行文本域，多行文本域对应的标签是<textarea>标签。语法如下：

<textarea name="名称" cols="显示列的宽度" rows="显示的行数">

文本内容

</textarea>

 
  1.    
        
       
       
        
         <!--多行文本域标签textarea的使用-->    
       
  2.    
        
       
       
        
         <form name="form3" action="" method="post">    
       
  3.    
        
       
       
        
         <h3>请描述一下您对未来手机的期望：     </h3>    
       
  4.    
        
       
       
        
         <textarea name="expect" cols="50px" rows="6">     <!--cols属性用来指定多行文本框的列的宽度，rows属性用来指定多行文本框的行数-->    
       
  5.    
        
       
       
        
         外观：    
       
  6.    
        
       
       
        
         功能：    
       
  7.    
        
       
       
        
         价格：    
       
  8.    
        
       
       
        
         其他：    
       
  9.    
        
       
       
        
         </textarea>    
       
  10.    
        
       
       
        
         </form>

da代码结果演示：

课后练习：完成用于注册表单


参考文章：https://blog.csdn.net/weixin_41541562/article/details/105325563

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，在此表示感谢。

相关阅读

特别提醒:

1、请用户自行保存原始数据，为确保安全网站使用完即被永久销毁，如何人将无法再次获取。

2、如果上次文件较大或者涉及到复杂运算的数据，可能需要一定的时间，请耐心等待一会。

3、请按照用户协议文明上网，如果发现用户存在恶意行为，包括但不限于发布不合适言论、妄图

     获取用户隐私信息等行为，网站将根据掌握的情况对用户进行限制部分行为、永久封号等处罚。

4、如果文件下载失败可能是弹出窗口被浏览器拦截,点击允许弹出即可,一般在网址栏位置设置

5、欢迎将网站推荐给其他人，网站持续更新更多功能敬请期待，收藏网站高效办公不迷路。

      


请登录后回复

共有0条评论

© 2022 慧工作 版权所有 | 闽ICP备2022009970号