讲给后台程序员看的前端系列教程(08)——HTML5标签(7)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lfdfhl/article/details/100549076

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境,踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

之前,我们已经学习了HTML常用标签、HTML文本标签、HTML语义标签、HTML结构标签、HTML列表标签、HTML表格标签;现在我们来继续学习HTML表单标签。

HTML表单标签

HTML表单用于搜集用户输入的不同类型的数据并将其上传至服务端。嗯哼,了解完表单的作用,我们就来一起学习表单中最常用的标签。

fieldset标签

fieldset标签用于在表单中划分区域并显示边框,起到分组的作用。例如:可以将整个表单中的控件放到一个fieldset标签中;也可以将表单中功能相关联的几个控件置于同一个fieldset中。

legend标签

legend标签用于设置分组的标题。通常来讲,fieldset和legend配对使用。

input标签

input标签是表单中功能最丰富的标签,以下几种输入元素均可使用input实现。

  • 单行文本框
    只需将input标签的type属性设置为text即可

  • 密码输入框
    只需将input标签的type属性设置为password即可

  • 数字输入框
    只需将input标签的type属性设置为number即可

  • 邮箱输入框
    只需将input标签的type属性设置为email即可

  • 日期输入框
    只需将input标签的type属性设置为date即可

  • 时间输入框
    只需将input标签的type属性设置为time即可

  • 颜色输入框
    只需将input标签的type属性设置为color即可

  • 单选框
    只需将input标签的type属性设置为radio即可

  • 复选框
    只需将input标签的type属性设置为checkbox即可

  • 文件上传
    只需将input标签的type属性设置为file即可

  • 提交表单
    只需将input标签的type属性设置为submit即可

  • 重置表单
    只需将input标签的type属性设置为reset即可

select和option标签

利用select和option标签可实现下拉选择菜单。其中,select标签用于在表单中添加下拉菜单,option标签嵌套在select标签中用于定义下拉菜单的具体选项;每对select标签下至少包含一对option标签。

textarea标签

利用textarea标签可在HTML中创建供用户输入的文本区域

表单的提交

嗯哼,利用刚才提到的这些标签就可以实现简单的表单页面了;在此之后我们需要将表单提交至服务器。在此介绍与表单提交有关的几个属性。

action

处理表单数据的服务器地址

method

提交表单的方式,常用的为get和post

enctype

enctype表示将表单数据发送到服务器之前对表单数据进行编码。它有三种取值:

  • application/x-www-form-urlencoded:此为默认方式,在发送数据前将数据中的特殊字符进行URL编码处理。比如,将空格变为+号,将特殊符号转换为 ASCII HEX 值。

  • text/plain:该取值的作用与application/x-www-form-urlencoded非常类似,它也将表示将空格转换为 “+” 加号,但不对特殊字符编码

  • multipart/form-data:表示不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。

其实,这和我们之前写Android代码是非常类似的,是不是觉得很眼熟?比如,在APP中上传图片,我们会设置:

multipartBodyBuilder.setType(MultipartBody.FORM);

点开源码就会发现MultipartBody.FORM的值正是multipart/form-data.所以,这不是什么新鲜玩意,它是我们的老朋友啦!

target

提交表单数据后,服务器会作出相应的响应;所以,我们可以在浏览器中显示服务器返回的数据。那么,是在原来的窗口显示数据呢?还是新打开一个窗口呢?此时可通过target属性来指定显示方式。target属性值常用的有:

  • _self:表示在原窗口中显示数据

  • _blank:表示在新窗口中显示数据


表单示例

代码如下:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>HTML表单</title>
	</head>
	<body>
		<form id="userform" action="your url" method="post" title="用户注册表单" target="_self" enctype="multipart/form-data">
			<fieldset>
				<legend>用户注册信息</legend>
				<br>
				昵称:<input type="text" name="un" maxlength="15" value="Tom">
				<br>
				<br>
				密码:<input type="password" name="pw" maxlength="10">
				<br>
				<br>
				性别:<input type="radio" name="gender" value="m" checked="checked"><input type="radio" name="gender" value="w"><br>
				<br>
				头像:<input id="userphoto" type="file" name="profile">
				<br>
				<br>
				籍贯:<select name="province">
					<option>河北</option>
					<option>辽宁</option>
					<option>吉林</option>
					<option>云南</option>
					<option selected="selected">广西</option>
				</select>
				<br>
				<br>
				爱好:<input name="hobby" type="checkbox">读书
				<input name="hobby" type="checkbox">写字
				<input name="hobby" type="checkbox" checked="checked">弹琴
				<br>
				<br>
				个人简介:
				<br>
				<br>
				<textarea name="introduce" cols="30" rows="10">请在此输入简介</textarea>
				<br>
				<br>
				个人网站:<input name="userurl" type="url">
				<br>
				<br>
				个人邮箱:<input name="useremail" type="email">
				<br>
				<br>
				身体体重:<input name="userweight" type="number">
				<br>
				<br>
				出生日期:<input name="userdate" type="date">
				<br>
				<br>
				详细时间:<input name="usertime" type="time">
				<br>
				<br>
				性格颜色:<input type="color" name="usercolor">
				<br>
				<br>
				<input type="submit" value="开始注册">
				<input type="reset" value="重置信息">
				<br>
				<br>
			</fieldset>
		</form>
	</body>
</html>

效果如下:
在这里插入图片描述

结合刚才的示例,在此强调一些需要注意的地方:

  • 上传的表单中含有文件时,请选用post方式提交

  • 上传的表单中含有文件时,请将enctype属性值设置为multipart/form-data

  • 利用多个input标签组合在一起实现单选时,请将它们的 type均设置为radio;并将它们的name均设置为同一值。多选的情况,亦类似;不再赘述


HTML5中表单的新特性

form属性

在HTML5之前,所有的表单标签都必须放在form标签中。但是,在HTML5中新增了form属性,用于表示该标签所属的form标签。所以,每个标签不必必须放在form标签中也能成为表单的一部分,只需把该标签的form属性的值设置为其所属表单的id即可。例如,在刚才的示例中再添加一个输入框用于记录毕业院校:

毕业院校:<input type="text" name="school" form="userform">

代码如上所示,那么该input标签也属于了userform表单;亦会被提交至服务端。

datalist标签

datalist标签用于展示文本框与下拉菜单组合在一起的效果,请注意datalist的id值必须是form表单的list属性值。请看如下示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>datalist标签</title>
</head>
<body>
	<form action="url" method="get">
		请输入你最喜欢的女明星:<input type="text" name="name" list="namesList">
	</form>
	<datalist id="namesList">
		<option value="lbb">李冰冰</option>
		<option value="fbb">范冰冰</option>
		<option value="gyy">高圆圆</option>
	</datalist>
</body>
</html>

运行后效果如下图所示:

在这里插入图片描述

formxxxx属性

为了更加方便的操控表单标签,在HTML5中新增了几个formxxxx属性,简介如下:

  • formaction属性用于指定表单提交的地址

  • formmethod属性用于指定表单提交的方式

  • formtarget属性用于指定打开服务端响应URL的方式

  • formenctype属性用于指定表单数据提交时的编码方式

请看如下示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML表单中的formxxx属性</title>
</head>
<body>
	<form>
		username:<input type="text" name="un">
		<br>
		<br>
		password:<input type="password" name="pw">
		<br>
		<br>
		<input type="submit" value="注册" formaction="regist url" formmethod="get" formtarget="_self" formenctype="application/x-www-form-urlencoded" >

		<input type="submit" value="登录" formaction="login url" formmethod="post" formtarget="_blank" formenctype="multipart/form-data">
	</form>
</body>
</html>

在该示例中,有两个功能:登录和注册;不同的功能那么就有不同的action、method、target、enctype。在此通过formaction、formmethod、formtarget、formenctype属性灵活指定了在不同的操作下不同的表单提交方式。

展开阅读全文

没有更多推荐了,返回首页