Web前端复习-3、表单

最新推荐文章于 2022-03-07 10:39:40 发布

今天也是爱大大的一天吖

最新推荐文章于 2022-03-07 10:39:40 发布

阅读量1.5k

点赞数

分类专栏：复习文章标签： html web

本文链接：https://blog.csdn.net/qq_45560350/article/details/106772131

版权

复习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在这里插入图片描述

1.表单概述

Form表单是HTML的一个重要部分，负责采集和提交用户输入的信息

表单主要分为表单标签及==表单控件（表单域+按钮）==两大类

表单控件又可细分为表单域(采集数据)和按钮（提交数据）两部分，常见的表单域包括文本框、密码框、多行文本框、！单选按钮 !、复选框、下拉选择框等

在表单域录入数据后，可通过表单的特殊控件（如提交按钮等）将数据传递给服务器端，由服务器接收表单数据并进行处理

常见的服务器端语言有JSP、PHP、ASP.NET（ASP+）、NodeJS等

2.表单标签

表单标签是一个包含表单元素的区域
可以包含一些表单控件
可以包含其他的HTML标签
```
<form action="处理数据程序的URL地址" method="get|post" name="表单	名称" … >
</form>
```
一个页面可以拥有一个或多个表单标签，标签之间相互独立，不能嵌套
用户向服务器发送数据时一次只能提交一个表单中的数据
如需同时提交多个表单，需使用JS的异步交互方式来实现

2.1 action属性

action属性值是Web服务器上数据处理程序的URL地址，或者是Email地址。

<form action="http://www.itshixun.com/web/login.jsp" ></form>  <!--绝对URL-->
<form action="/web/login.jsp" ></form>                              <!--相对URL-->
<form action="mailto:admin@itshixun.com" ></form>               <!--Email地址-->

2.2 method属性

method属性用于设置向服务器发送数据的方式

主要包括以下两种方式：get方式和post方式

get方式

将数据作为URL的一部分发送给服务器（看的到）。URL由地址部分和数据部分构成，两者之间用问号”?“隔开，数据以"名称=值"的方式成对出现，且数据与数据之间通过"&"符号进行分割

http://www.itshixun.com/web/login.jsp?userName=admin&userPwd=123456

post方式

将数据隐藏在HTTP的数据流中进行传输；请求数据不会出现在地址栏中，安全性比get方式要高，并且对数据长度没有限制。
在这里插入图片描述

2.3 id和name属性

id属性是表单在网页中的唯一标识
（！习惯问题！）在设计表单页面时，应为每个form表单提供一个合适的id，方便后期的CSS样式表及JavaScript脚本对其引用
name属性用来设置表单元素的名称，在页面中也应尽量保持唯一
在早期版本中name属性使用较多，现在多用id属性替代

2.4 enctype属性

在表单数据提交之前，需要通过enctype属性说明表单中数据的编码方式
目前浏览器支持的编码方式有三种：application/x-www-form-urlencoded、multipart/form-data和text/plain方式
application/x-www-form-urlencoded是默认编码方式，大多数表单数据会采用此种编码方式。这种编码方式在发送数据到服务器之前，所有字符都会进行Unicode编码，并对某些字符进行特殊处理，例如：遇到空格时将被转换成加号（+），其他特殊字符将转换为对应的ASCII格式（即“%XX”格式，由一个百分号和两位代表ASCII码的十六进制数字构成）

以下面数据为例，传递的数据包括用户名（zhang san）和密码（&）

在编码前先使用“&”符号将数据连接起来，然后再进行编码。
经过编码后的数据格式：
multipart/form-data编码方式常用于表单包含文件上传控件的情况，该方式不对字符进行编码
text/plain编码方式遇到空格时，会将其转换为加号（+），但不对其他特殊字符进行编码

2.5 target属性

target属性用于<a>标签时，用于指明被连接的内容将在哪个框架或浏览器中进行加载；
target属性用于<form>标签时，用户提交表单后将在哪个框架或浏览器中显示该表单的处理结果（不是处理）。

3.表单域

表单域多用于收集网站访问者的信息，一般位于<form></form>标签之间
表单域主要包括文本框、密码框、隐藏域、多行文本框、单选按钮、复选框、列表选择框和文件选择框等元素
除多行文本框<textarea>和列表选择框<select>外，大部分表单域使用<input>标签来创建

在这里插入图片描述

3.1 单行文本域

单行文本框，通常用来输入一些简单的内容。

在HTML中，通过将<input>标签的type属性设为text方式来创建一个单行文本框。

<form>
    <input type="text" /> <br/><br/>
    <input type="text" name="userName" id="userName" value="请输入用户名" /><br/><br/>
    <input type="text" value="请输入用户名" size="25" maxlength="10" /><br/><br/>
    <input type="text" value="请输入用户名" disabled="disabled" /><br/><br/>
    <input type="text" value="请输入用户名" readonly="readonly" /><br/><br/>
    <input type="text" value="自动获取焦点" autofocus="autofocus" />
</form>

在这里插入图片描述
disabled="disabled"属性可简写为disabled，禁用元素，不能进行操作
readonly="readonly"属性可简写为readonly，只能看，不能进行操作
autofocus属性进入页面自动获取焦点

3.2 密码域

密码框与文本框相似，但在框中输入内容时，显示的不是当前输入的内容而是掩码形式（星号“*”或其他符号）
- 在HTML中，通过将<input>标签的type属性设为password方式来创建一个密码框

<form>
    用户名：<input type="text"  name="userName" id="userName"         value="请输入用户名"/> <br/><br/>
    密　码：　<input type="password" name="userPwd" id="userPwd"/><br/><br/>
    确认密码：<input type="password" name="userRePwd" id="userRePwd" size="25"        disabled="disabled" value="请输入确认密码"/><br/><br/>
</form>

在这里插入图片描述

密码框可以使用<input>标签的通用属性；第二个密码框被禁用时，也可以使用默认值，但只能以掩码形式显示出来。

3.3 单选按钮

单选按钮是指在一组数据中只能选择其中一个选项
在HTML中，通过将<input>标签的type属性设为radio方式来创建一个单选按钮选项

<input type="radio" name="…" value="…" checked="checked" />

其中：

type="radio"用于指明表单域的类型是单选按钮
具有相同name属性的单选按钮分为一组，一组只能选择一项
value属性用于指定该项的值，同一组内的值不应相同
checked="checked"属性用于指定该项默认被选中，也可以简写成checked格式

当表单中有多个单选按钮时，浏览器会根据单选按钮的name属性进行分组，每组只能选择其中一项

<form>
  性别：<input type="radio" name="sex" value="man" checked="checked"/>男
       <input type="radio" name="sex" value="woman" />女 <br/>
  专业：<input type="radio" name="major" value="computer" />计算机
       <input type="radio" name="major" value="physics" checked/>物理
       <input type="radio" name="major" value="chemical"/>化工
</form>

在这里插入图片描述

3.4 复选框

复选框是指在一组数据中允许用户选择一项或多项，各项之间并不互斥
在HTML中，通过将<input>标签的type属性设为checkbox方式来创建一个复选框

<input type="checkbox" name="…" value="…" checked="checked"/>

其中：

type="checkbox"用于指明表单域的类型是复选框
具有相同name属性的复选框分为一组，组内允许多选
checked="checked"属性用于指定该项默认被选中，也可以简写成checked格式

当复选框有多项数据时，浏览器会根据复选框的name属性进行分组，分组前后在页面显示方面并没有差别，但在使用JavaScript特效或向服务器提交数据时，需要对复选框进行合理分组，以便对数据的处理。

<form>
 爱好：
   <input type="checkbox" name="hobby" value="music" />音乐 
   <input type="checkbox" name="hobby" value="swimming" />游泳 
   <input type="checkbox" name="hobby" value="football" checked/>足球 <br>
 选修：
   <input type="checkbox" name="choice" value="computer" checked />计算机
   <input type="checkbox" name="choice" value="physics" />物理
   <input type="checkbox" name="choice" value="chemical" checked />化工
 </form>

在这里插入图片描述

注意：
当复选框没有value属性时，如果被选中value值为on，否则value值为off。

3.5 文件选择框

用户通过表单上传文件时，需要使用文件选择框来选择上传文件
在HTML中，通过将<input>标签的type属性设为file方式来创建一个文件选择框

<input type="file" name="…" accept="…"/>

其中：

type="file"用于指明表单域的类型是文件选择框
accept属性用于指定文件选择窗口的文件类型过滤；点击选择文件按钮时，会在弹出的文件选择窗口中，根据accept指定的类型对文件自动进行过滤
图片的格式包括image/gif、image/jpeg、image/*等格式

使用文件选择框时，form表单的enctype属性应设为multipart/form-data类型，method属性应为post类型

<form method="post" enctype="multipart/form-data">
     请选择上传的头像：<input type="file" accept="image/*" name="headImage" />
</form>

在这里插入图片描述

3.6 隐藏域

在网页之间传递数据时，有些数据不希望用户在页面中看到，可以通过隐藏域来实现
在HTML中，通过将<input>标签的type属性设为hidden来创建一个隐藏域

<input type="hidden" name="…" value="…" />

注意：

隐藏域的数据虽然不能在浏览器中直接显示，但是可以通过查看源码的方式找到；因此，不要使用隐藏域保存敏感的数据。
隐藏数据也可以通过CSS中的display属性或visibility属性来实现。

<form>
       <input type="hidden" name="hiddenData" value="不显示的数据"/>
</form>

在这里插入图片描述
隐藏域并没有显示出来。但是在网页的“源代码”中可以找到相应代码。

3.7 多行文本框

多行文本框是用来输入较长内容的文本输入控件
在HTML中，通过将<textarea>标签创建一个多行文本框，标签之间的内容会在页面加载时显示出来

<textarea name="…" rows="…" cols="…" wrap="…" > 文本内容 </textarea>

<textarea>标签的wrap属性用于指定多行文本框的换行方式

注意：
用户若输入更丰富的内容时，可以采用富文本RTE（Rich Text Editor）来实现，当前比较流行的富文本框有ckEditor、UEditor以及kindEditor等。

3.8 列表选择框

列表选择框允许用户从列表中选择一项或多项。
在HTML中，可以通过<select>和<option>标签来创建一个列表框。

<select name="…" size="…" multiple="multiple">
   <option value="…" selected="selected">选项描述内容</option>
    …
</select>

其中：

列表选择框使用<select>标签进行定义，一个列表可以包含多个列表项<option>
<select>标签的size属性用于指定列表选择框显示的行数
<select>标签的multiple="multiple"属性用于指明当前列表框是否允许按住Ctrl键进行多选，默认只能选择一项
<option>标签的value属性多用于发送给服务器的选项值
<option>标签的selected="selected"用于设置当前选项默认被选中
<option>和</option>标签之间的选项描述内容是显示的列表选择项

<select>标签的属性列表
在这里插入图片描述
<option>标签的属性列表

<form>请选择国家：
    <select name="country" >
        <option>中国</option>
        <option>俄罗斯</option>
        <option>英国</option>
    </select>
    <br/><br/>请选择省份：
    <select name="province" size="4" multiple="multiple">
        <option value="SD">山东</option>
        <option value="NMG">内蒙古</option>
        <option value="TW" disabled>台湾</option>
        <option value="SX">山西</option>
        <option value="HN">湖南</option>
    </select>
    <br/><br/>请选择城市：
    <select name="city" > 
        <option value="BJ">北京</option>
        <option value="SH">上海</option>
        <option value="QD" selected="selected">青岛</option>
    </select>
</form>

在这里插入图片描述

`<optgroup>`标签

在一个列表选择框中，可以将列表项分为多组，使描述更加清晰
HTML中提供了<optgroup>标签，用于对列表项进行分组
该标签的label属性用于指定每个分组的名称，且分组名不能被选择
disabled属性用于设置该分组是否被禁用

<form> 请选择日期：
    <select name="day" >
        <optgroup label="--工作日--">
            <option value="monday">星期一</option>
            <option value="tuesday">星期二</option>
            <option value="wednesday">星期三</option>
            <option value="thursday">星期四</option>
            <option value="friday">星期五</option>
        </optgroup>
        <optgroup label="--休息日--">
            <option value="saturday">星期六</option>
            <option value="sunday">星期天</option>
        </optgroup>
        <optgroup label="--节假日--" disabled="disabled" >
            <option value="NewYear">春节</option>
            <option value="MayDay" selected="selected">五一</option>
            <option value="OctoberDay">十一</option>
        </optgroup>
    </select>
</form>

在这里插入图片描述

4.按钮控件

表单的按钮有多种功能：可以用于提交表单，也可以用于清除或重置表单，甚至用于触发客户端脚本程序。
按钮分为提交按钮、重置按钮、图片按钮和普通按钮，可以通过<input>标签或<button>标签来创建按钮。

`<input>`标签

<input type="submit|reset|button|image" name="…" src="…" value="…" />

其中：

button表示创建一个普通按钮，当用户点击按钮时，可以触发JavaScript脚本的按钮
image表示创建一个图片按钮，点击时也可以提交表单
src属性是可选的，当type属性为image时，用来指定图片的URL地址

<form action="http://www.itshixun.com" method="post">
    <input type="submit" value="提交按钮" name="btnSubmit"/>
    <input type="reset" value="重置按钮" name="btnReset"/>
    //点击普通按钮时，会弹出提醒信息
    <input type="button" value="普通按钮" name="btnNormal"
        onClick="alert('可以调用JavaScript脚本!')"/>
        //点击图片按钮时，功能与submit按钮基本一样
    <input type="image" src="../images/imageButton.jpg" width="100"/>
</form>

在这里插入图片描述

`<button>`标签

在HTML表单中，还可以使用<button>标签创建一个按钮。

<button type="submit|reset|button" value="…" name="…"> 正文内容 </button>

button按钮与input按钮相比，提供了更强大的功能和更丰富的内容。<button>与</button>标签之间的内容都是按钮的内容，包含任何可接受的正文内容，例如文本、图片、视频等。

<form action="http://www.itshixun.com" method="post">
    <button type="submit" value="提交内容">提交内容 </button>
    <button type="reset" value="重置内容">重置内容 </button>
    <button type="button" value="普通按钮"
         onclick="alert('可以调用JavaScript脚本!')">普通按钮 </button>
    <button type="submit" value="提交内容">
           <img src="../images/submit.jpg" width="100"/>
    </button> 
</form>

5.表单分组

常见的分组标签有<fieldset>和<legend>标签

<form>
   <fieldset>
     <legend>请选择个人爱好</legend>
     表单控件...  
   </fieldset>
   ...  
</form>

<fieldset>标签可以看作表单的一个子容器（可以不放在<form>标签内），将所包含的内容以边框环绕方式显示
<legend>标签则是为<fieldset>边框添加相关的标题

<fieldset>
	<legend>请选择爱好</legend>
	<input type="checkbox"name="hobby" value="sing" checked />sing <br>
	<input type="checkbox" name="hobby" value="dance" disabled="">dance <br>
	<input type="checkbox" name="hobby" value="read" >read <br>
</fieldset>

在这里插入图片描述

总结

表单（form）是HTML的一个重要部分，负责采集（表单域）和提交（按钮）用户输入的信息
一个页面中可以包含多个表单，但用户一次只能向服务器发送一个表单中的数据
属性enctype取值可以是application/x-www-form-urlencoded(默认编码方式数据提交之前)、multipart/form-data或text/plain
method属性设置的方法将表单中的数据传送给服务器进行处理，分为get方式和post方式
常见的表单域有文本框、密码框、多行文本框、单选按钮、复选框、下拉选择框等
按钮主要分为提交按钮、重置按钮、图片按钮、普通按钮，具体可以通过<input>或<button>标签来实现
通过表单分组<fieldset><legend>的方式，可以将表单上的控件在形式上进行组合，使其一目了然

今天也是爱大大的一天吖

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Web前端复习-3、表单

1.表单概述Form表单是HTML的一个重要部分，负责采集和提交用户输入的信息表单主要分为表单标签及==表单控件（表单域+按钮）==两大类表单控件又可细分为表单域(采集数据)和按钮（提交数据）两部分，常见的表单域包括文本框、密码框、多行文本框、！单选按钮 !、复选框、下拉选择框等在表单域录入数据后，可通过表单的特殊控件（如提交按钮等）将数据传递给服务器端，由服务器接收表单数据并进行处理常见的服务器端语言有JSP、PHP、ASP.NET（ASP+）、NodeJS等2.表单标签表单标签是一个.
复制链接

扫一扫