educoder——web：构建web表单

最新推荐文章于 2024-07-11 17:17:41 发布

小小话编程

最新推荐文章于 2024-07-11 17:17:41 发布

阅读量1.8k

点赞数 1

分类专栏： educoder-web 文章标签：前端服务器 html

本文链接：https://blog.csdn.net/m0_51461030/article/details/121730146

版权

构建web表单

摘要由CSDN通过智能技术生成

文章目录

1.表单的结构
2.创建输入控件
3.创建文本区域
4.创建下拉列表
5.对表单元素分组
6.对表单进行验证
7.给表单组件添加说明

1.表单的结构

1.1表单的基本概念

表单是收集用户数据的容器。

1.1.1表单的结构

一个表单通常由表单域、表单控件、提示信息组成。

表单域：相当于一个容器，用来容纳所有的表单控件和提示信息
表单控件：实现用户输入的组件。如文本框、密码框、单选按钮、复选按钮、下拉列表框、多行文本框、文件域等控件。
提示信息：提示用户进行填写和操作的说明文字。

每个表单都以form开始标签开始，以form结束标签结束。
两个标签之间是组成表单的各个控件及提示信息。
表单的基本结构如下：

<form action="url地址" method="提交方式" name="表单名称">           
    各种表单控件及提示信息
</form>

1.1.2form的属性

表单在向服务器传输数据时需要一些进行一些设置，可通过form标签的属性来实现。

name
- 每个表单和表单控件都有一个 name 属性
- 用于在提交表单时对表单及数据进行识别
- 通过指定表单的名称，来区分同一个页面中的多个表单
action
- 在提交表单时，action属性用于指定接收并处理表单数据的服务器程序的url地址。
method
- 在提交表单时，method属性用于设置表单数据的提交方式。
- 有两种方法：
  - get方法
    - 采用GET方法时，浏览器会与服务器建立连接，然后将表单数据直接附在action属性设置的URL之后，通过URL在一个传输步骤中发送所有的表单数据，URL和表单数据之间用问号进行分隔。显然这种方法用户数据要显示在地址栏中，保密性很差，而且对用户发送的数据量也有限制。
  - post方法
    - 采用POST方法是在HTTP请求中嵌入表单数据。浏览器首先与action属性中指定的服务器建立连接，一旦建立连接之后，浏览器按分段传输的方法将数据发送给服务器。显然这种方法用户数据嵌入在http请求中而不是地址栏的，保密性较好，对用户发送的数据量也无限制。但post方法发送的信息是未经加密的，容易被黑客获取。
其他属性（HTML5）

autocomplete
- 规定是否启用表单的自动完成功能。
- 自动完成允许浏览器侦测字段输入，当用户开始键入时，浏览器会基于以前键入过的值，自动列表显示在字段中填写的选项。
- 取值为on,启用自动完成功能;
  
  取值为off，禁止自动完成功能。
novalidate
- 规定是否不进行表单验证。
- 启用该属性，则当提交表单时不进行验证。

1.1.3表单控件的类型

常用的表单控件有以下几种：

input控件：是单行输入型控件，用来接受用户输入的信息。
textarea控件：用来创建一个支持多行的文本输入区域。
select控件：用于创建下拉列表框。
button控件：用于定义一个按钮。（不采用）

1.1.4例子

在我们了解了这些控件类型后，我们可以自己做一个表单统计学生相关信息

为了使表单看上去更加美观，我们可以借助表格（去掉边框线）实现，同时设置标题栏右居中，输入栏左居中

答案：

1.2学会设置action和method属性

form表单示例

在HTML中，使用<form></form>标签来定义表单，在该标签中可通过name设置表单名称，通过action属性设置接收并处理表单数据的程序路径，method属性设置提交方法。例如：

<form name="myform" method="get" action="passwodl.jsp">...</form>

答案：

<!DOCTYPE html>
<html>
<body>
    <!-- ********* Begin ********* -->
  <form name="selectForm" method="post" action="myselect.jsp">
    <!-- ********* End ********* -->
  <select size="1">
   <option value="JZ">橘子</option>
   <option value="PG">苹果</option>
   <option value="XJ">香蕉</option>
   </select>
  </form>
</body>
</html>

2.创建输入控件

2.1 input控件相关概念

2.1.1input控件的属性

input标签是单标签，用于创建采集用户输入信息的表单控件。
input控件常用的属性

type：控件类型
name/id：控件名称，取值由用户定义
value：控件中默认文本，取值由用户定义,input控件类型不同，含义不同
- button、reset和submit，value定义按钮上显示的文本；
- text、password和hidden，value定义域的初始值；
- checkbox、radio、image，value定义与输入相关联的值。
size：控件在页面中显示宽度（px），取值正整数
readonly：控件内容为只读，取值为readonly
disabled：首次加载页面时禁用该控件（显示为灰色），取值为disabled
checked：定义选择控件默认值被选中，取值checked
maxlength：控件允许输入的最多字符数，取值正整数
min：控件允许输入的最少字符数，取值正整数

HTML5中新增的input属性还有：

placeholder：用户输入提示，取值由用户定义,这种方法占用空间少
required：输入字段必须填写，取值为required，eg：密码和用户名
autofocus：自动聚焦，取值为autofocus
pattern：规定输入字段值的模式或格式，取值为正则表达式

2.1.2 input控件的类型

input控件通过type属性的取值设置不同类型，主要有：

text：定义单行文本框，文本框的默认宽度是20个字符。
password：定义密码框，密码域中的字符会被掩码（显示为星号或原点）。
radio：定义单选按钮，单选按钮允许用户在一定数目的选择项中必须且仅能选取一个。
checkbox：定义复选框，复选框允许用户在一定数目的选择项中不选、选取一个或多个。
button：定义按钮，单击按钮时需自行定义行为。button常用于在用户单击按钮时启动JavaScript程序，响应用户。
submit：定义提交按钮，提交按钮用于向服务器发送表单数据。数据会发送到表单action属性中指定的位置。
reset：定义重置按钮，重置按钮会清除表单中的所有数据。
file：定义文件域，包括输入字段和“浏览”按钮，供文件上传。
image：定义图像形式的提交按钮，需配合src属性和alt属性使用。
hidden：定义隐藏域，隐藏域对于用户是不可见的，隐藏域通常会存储一个默认值。

HTML5中新增的type取值：

search：用于搜索域，如站点搜索或Google搜索。search显示为常规的文本框。
email:定义包含e-mail地址的输入域，在提交表单时，会自动验证email域的值，输入的格式不对时，会有提示
url:定义包含URL地址的输入域，在提交表单时，会自动验证url域的值。
tel:定义一个电话号码输入域，手机端输入信息时，会弹出拨号键盘。
number:定义一个数字输入域，可以使用max和min属性规定输入数值的最大值和最小值，让输入的数据在合法值的范围内。也可以使用step属性规定数字的增减间隔。
range:定义包含一定范围内数字值的输入域，range类型显示为滑动条，默认值范围是0~100。同时可以使用max、min和step属性。
color:定义颜色选择域，输入时会打开调色板选取颜色。
date:定义日期选择域，鼠标点击输入框，可以看到浏览器原生的日历框。
month:定义月份选择域，效果类似date。
week:定义周选择域，效果类似date。
time:定义时间选择域。
datetime-local:定义本地日期时间选择域。
datetime:定义日期时间选择域。

答案：

2.2创建文本框

文本框的设置

在input标签中,将type属性设置为text，可显示单行文本框。

使用name属性来规定input元素的名称，它可以对提交到服务器后的表单数据进行标识。
使用size属性可规定文本框的宽度，
使用maxlength属性可规定控件允许输入的最多字符数。

示例如下：

 姓名：<input type="text" name="userName" size="20" maxlength="16"/>

答案：

<html>
  <head>
   <meta charset="utf-8"/>
   <title>设置单行文本框</title>
  </head>
  <body>
   <form>
      姓名：
   <!-- ********* Begin ******* -->
       <input type="text" name="yourname" size="15" maxlength="5">
   <!-- ********* End ********* -->   
   </form>
  </body>
</html>

2.3创建密码框

密码框的设置

在input标签中,将type属性设置为password，可显示密码框。

使用name属性来规定input元素的名称，它可以对提交到服务器后的表单数据进行标识。
使用size属性可规定密码框的宽度，

使用value属性可规定密码的初值。

示例如下：

密码：<input type="password" name="check" size="20"  value="123"/>

答案：

<html>
  <head>
   <meta charset="utf-8"/>
   <title>设置密码框</title>
  </head>
  <body>
   <form>
      姓名：
      <input type="text" name="yourname" size="15" maxlength="5"/>
      <br>
      密码：
    <!-- ********* Begin ******* -->
      <input type="password" name="yourpassword" size="15" value="12345">
    <!-- ********* End ********* -->
   </form>
  </body>
</html>

2.4创建单选按钮

单项选择的设置

在input标签中,将type属性设置为radio，可设置单选框；

使用name属性来规定input元素的名称，要求单项选择中的每个选项都具有相同的name；

使用value属性可规定与输入相关联选项值。

示例如下：

性别：
<input type="radio" name="sex" value="man"/>男
<input type="radio" name="sex" value="woman"/>女

答案：

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8"/>
   <title>设置单行文本框</title>
  </head>
  <body>
   <form action=""method="post">
     姓名：<input type="text" name="yourname" size="15" maxlength="5"/><br/>
     密码：<input type="password" name="password" size="15" value="12345"/><br/>
     国庆期间你最喜欢看的电影？<br/>
    <!-- ********* Begin ********* -->
     <input type="radio" name="Film" value="Film1">夺冠
     <input type="radio" name="Film" value="Film2">我和我的祖国
     <input type="radio" name="Film" value="Film3"</