web前端技术——三、表单

3.1概述

From表单,负责采集和提交用户的输入信息

表单分为表单标签和表单控件

表单控件又分为表单域和按钮

常见表单域包括文本框、密码框、多行文本框、单选按钮、复选框、下拉选择框

在表单域录入数据后,可通过特殊控件(提交按钮等)将数据传递给服务器端(服务器端语言:JSP、PHP、ASP、NET、NodeJS等)接收数据并处理表单。

3.2表单标签

可包含一些表单控件以及其他的HTML标签

一个页面拥有一个或多个表单标签,标签之间相互独立不能嵌套。

一次只提交一个表单数据,同时提交多个需要Javascript的异步交互方式来实现

表单属性:

Action:提交表单向何处发送表单中的数据。属性值是web服务器数据处理程序的URL地址,或Email地址。

Accept-charset:服务器可处理的表单数据字符集

Enctype:表单数据内容类型,说明表单中数据的编码方式。可为

application/x-www-form-urlencoded(默认的编码方式,发送数据到服务器之前,所有字符都会进行Unicode编码,并对某些字符进行特殊处理,例如:遇到空格时将被转换成加号(+),其他特殊字符将转换为对应的ASCII格式(即“%XX”格式,由一个百分号和两位代表ASCII码的十六进制数字构成))

text/plain(‘编码方式遇到空格会转换为加号,但不对其它特殊字符进行编码)、

multipart/form-data(上传文件只能用这个,不对字符进行编码)

Id:表单对象的名称(表单在网页中的唯一标识,不能出现重名)

Name:表单对象的名称(在页面中尽量保持唯一,但也可重名)

Target:打开处理URL的目标位置(不建议使用),用户提交表单后将在哪个框架或浏览器中显示该表单的处理结果。

Method:规定向服务器端发送数据所采用的方式,取值可为get(将数据作为URL的一部分发送给服务器,URL有地址部分和数据部分构成两种之间用问号隔开,数据以“名称=值”键值对的方式成对出现,且数据与数据之间通过“&”符号进行分割)、post(将数据隐藏在HTTP的数据流中进行传输;请求数据不会出现在地址栏中,安全性比get方式要高,密码什么的用post,并且对数据长度没有限制)

Onsubmit:向服务器提交数据之前,执行器指定的JavaScript脚本程序

Onreset:重置表单数据之前,执行器指定的JavaScript脚本程序

示例:

<form id="form1" action="form01.html" method="get" name="表单名称" enctype="application/x-www-form-urlencoded" >
    用户名:<input type="text" name="uname"><br>
    密码:<input type="t" name="upsd"><br>
    照片:<input type="file">
    <input type="submit" value="提交"><br>
</form>
<form id="form2" action="form01.html" method="post" name="表单名称" enctype="multipart/form-data" >
    用户名:<input type="text" name="uname"><br>
    密码:<input type="t" name="upsd"><br>
    <input type="submit" value="提交"><br>
</form>

3.3input表单域

用于收集网站访问者信息,一般位于<form>标签之间。

除多行文本框和列表选择框外,大部分表单域使用<input>标签来创建属性描述

Id:设置当前控件的唯一ID,在界面设计时,CSS、JavaScript中可以引用
name:设置当前控件的名称,在向服务器发送数据时,服务器根据name属性获取对应表单域的值。

value :设置表单域的初始值,网页加载过程中,默认显示该值
type:该属性是必须的,用来说明当前控件的类型,取值可以是text、password、radio、checkbox、file、hidden、button、submit、reset、image等
maxlength:设置输入到文本框的最大字符数;输入达到最大数后,用户按下更多键,也不会添加新的字符。

Size: 设置文本输入控件的宽度,单位为字符

Disabled:无效的

Readonly:只读

单行文本框:<input>标签的type属性设置为test

密码框:<input>标签的type属性设置为password

单选按钮:一组数据中只能选择其中一个选项<input>标签的type属性设置为radio

具有相同name属性的单选按钮分为一组,一组只能选一项

Value用于指定该项的值,同一组内的值不应相同

Checked=“checked“用于指定默认被选中的一项

复选框:允许选一项或多项,各项并不互斥。<input>标签type属性设为checkbox

具有相同name属性的复选框分为一组,组内允许多选

Checked=“checked“用于指定默认被选中的一项

文件选择框:<input>标签type属性设为file

Accept属性用于指定文件选择窗口的文件类型过滤

图片的格式包括image/gif, image/jpeg, image/*等格式

Enctype属性要设置为multipart/form-data

Method属性为post

隐藏域:<input>标签type属性设为hidden。不希望用户看到的数据,可隐藏。

也可通过CSS中的display属性或visibility属性来实现

例:

<form id="form2" action="form01.html" method="post" name="表单名称" enctype="multipart/form-data" >
    用户名:<input type="text" name="uname" size="25" maxlength="10" value="请输入用户名"/><br>
    密码:<input type="password" name="upsd"value="请输入密码" size="20" maxlength="16" /><br>
    <input type="text" value="请输入用户名" disabled="disabled"/><br>
    <input type="text" value="请输入用户名" readonly="readonly"/><br>
   性别: <input type="radio"  name="sex" value="man" checked="checked"/>
   
<input type="radio"  name="sex" value="woman"/><br>
    <input type="checkbox" name="hoppy" value="music"/>音乐
   
<input type="checkbox" name="hoppy" value="swimming"/>游泳
   
<input type="checkbox" name="hoppy" value="football"/>足球<br>
    请选择上传的头像<input type="file" accept="image/*" name="headimage"><br>
    <input type="hidden" name="hiddenData" value="不显示的数据"/>
    <input type="submit" value="提交"/><br>

多行文本框:输入较长内容的文本输入控件。<textarea>内容</textarea>

属性:off:默认值,文本域中内容足够多时,会在文本域添加滚动条

Virtual:实现文本区内的自动换行,但在传输给服务器时,文本只在用户按下enter键的地方进行换行,其他地方无换行效果

Physical:实现文本区内的自动换行,并以这种形式传送给服务器。

注:输入内容更丰富,可使用富文本框。

<textarea name="多行文本" rows="6" cols="40" wrap="virtual">文本内容,多一点文本,才能看的出效果
</textarea>

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

列表选择框使用<select>标签进行定义,一个列表可包含多个列表项<option>

<select>的属性

Name:设置列表的名称

Size:设置列表中可见选项的数目,(默认为1)Size属性用于指定列表选择框显示的行数

      

Multiple:设置列表是否可以选择多个选项,指明当前列表是否允许按住ctrl进行多选,默认只能选一项

Disabled:设置列表是否被禁用

<option>属性列表

Value:设置该项的值,如果选中该项,该项的值就将发送给服务器。

Selected:当页面加载时,该项是否被选中。可理解为默认被选中的项。

Disabled:该项在首次加载被禁用

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

<optgroup>:对列表进行分组

属性label用于指定分组名,且分组名不能被选择

属性disabled用于设置该分组是否被禁用

3.4按钮控件

表单的按钮有多种功能:提交表单,清除和重置表单,甚至触发客户端脚本程序。

按钮分为:提交按钮、重置按钮、图片按钮和普通按钮,可通过<input>或<button>创建按钮。

例:

<form action="http://www.baidu.com">
    <input type="submit" name="btnsubmit" value="提交按钮"/>
    <input type="reset" name="btnreset" value="重置按钮"/>
    <input type="submit" name="btnnormal" value="普通按钮" onclick="alert('可调用JavaScript脚本')"/>
    <input type="image" src="../images/sky.jpg" width="100" value="图片按钮"/>
</form>

Button按钮与input按钮相比,功能更强大,可包含任何可接受的正文内容,文本图片视频都可以。

<form action="http://www.baidu.com">
    <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/sky.jpg" width="290"></button>
</form>

3.5表单的分组

<fieldset>可以看作是表单的一个子容器,将包含的内容以边框环绕方式显示

<legend>:为<fieldset>边框添加相关标题

<form>
    <fieldset>
        <legend>请选择个人爱好</legend>
        <input type="checkbox" name="hoppy" value="music"/>音乐<br/>
        <input type="checkbox" name="hoppy" value="swimming"/>游泳<br/>
        <input type="checkbox" name="hoppy" value="football"/>足球<br/>
    </fieldset>
</form>

3.6写在最后

有问题可评论区或私信联系,欢迎交流。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ice三分颜色

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值