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

news/2025/3/19 20:10:34/

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实现。

01.单行文本框

只需将input标签的type属性设置为text即可

示例如下：

昵称:<input type="text" name="username" placeholder="请输入您的昵称"/>

02.密码输入框

只需将input标签的type属性设置为password即可

示例如下：

密码:<input type="password" name="password" placeholder="请输入您的密码"/>

03.数字输入框

只需将input标签的type属性设置为number即可

示例如下：

身体体重:<input name="userweight" type="number"/>

04.邮箱输入框

只需将input标签的type属性设置为email即可

示例如下：

个人邮箱:<input name="useremail" type="email"/>

05.日期输入框

只需将input标签的type属性设置为date即可

示例如下：

出生日期:<input name="userdate" type="date"/>

06.时间输入框

只需将input标签的type属性设置为time即可

示例如下：

详细时间:<input name="usertime" type="time"/>

07.颜色输入框

只需将input标签的type属性设置为color即可

示例如下：

性格颜色:<input type="color" name="usercolor"/>

08.单选框

只需将input标签的type属性设置为radio即可，各input的值互斥。

示例如下：

性别:<input type="radio" name="gender" value="male" checked="checked"/>男<input type="radio" name="gender" value="female"/>女

09.复选框

只需将input标签的type属性设置为checkbox即可，各checkbox的值可多选。

示例如下：

爱好:<input name="hobby" type="checkbox"/>读书<input name="hobby" type="checkbox"/>写字<input name="hobby" type="checkbox" checked="checked"/>弹琴

10.文件上传

只需将input标签的type属性设置为file即可

示例如下：

头像:<input id="userphoto" type="file" name="profile"/>

11.提交表单

只需将input标签的type属性设置为submit即可

示例如下：

<input type="submit" value="开始注册"/>

12.重置表单

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

示例如下：

<input type="reset" value="重置信息"/>

select和option标签

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

示例如下：

籍贯:<select name="province"><option>河北</option><option>辽宁</option><option>吉林</option><option>云南</option><option selected="selected">广西</option></select>

textarea标签

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

示例如下：

个人简介:
<textarea name="introduce" cols="30" rows="10">请在此输入简介</textarea>

表单的提交

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

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：表示在新窗口中显示数据

表单提交示例

<form id="userform" action="your url" method="post" title="用户注册表单" target="_self" enctype="multipart/form-data">

表单综合示例

表单示例1

代码如下：

<!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 /><br />昵称:<input type="text" name="username" placeholder="请输入您的昵称"/><br /><br />密码:<input type="password" name="password" placeholder="请输入您的密码"/><br /><br />性别:<input type="radio" name="gender" value="male" checked="checked"/>男<input type="radio" name="gender" value="female"/>女<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均设置为同一值。多选的情况，亦类似；不再赘述

表单示例2

在实际开发中还可在表单中使用ul标签实现布局。

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>HTML表单</title></head><body><form action="your url" method="post"><ul><!-- 去除li的自带样式 --><li style="list-style: none">用 户：<input type="text" placeholder="请输入用户名"></li><br /><!-- 去除li的自带样式 --><li style="list-style: none">密 码：<input type="password" placeholder="请输入密码"></li><br /><!-- 去除li的自带样式 --><li style="list-style: none;">口 令：<input type="password" placeholder="请输入口令"></li><br /><input type="submit" value="登录"></ul></form></body>
</html>

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

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属性灵活指定了在不同的操作下不同的表单提交方式。


http://www.ppmy.cn/news/903994.html

相关文章

js特效之腾讯视频的图片轮播

js特效之腾讯视频的图片轮播

今天搞了一天的javascript，准备做一个特效图片轮播，现在晚上十二点，中午十二点我开始搞的，到了现在还没有搞好还差一个鼠标移进移出的暂定和播放，其实这是一个很简单的特效，就是从刚开始的css的布局就高了两个小时，因为没搞过这样的布局，所以觉得很难刚开始都不知道怎么…
阅读更多...
知识图谱数据构建的“硬骨头”，阿里工程师如何拿下？

知识图谱数据构建的“硬骨头”，阿里工程师如何拿下？

阿里妹导读&#xff1a;搜索“西红柿”&#xff0c;你不但能知道它的营养功效、热量&#xff0c;还能顺带学会煲个牛腩、炒个鸡蛋&#xff01;搜索引擎何时变成“暖男”了&#xff1f;原来背后有“知识图谱”这个强大的秘密武器。 作为近年来搜索领域和自然语言处理领域的热点…
阅读更多...
Android_ViewPager_图片自动翻转

Android_ViewPager_图片自动翻转

本博文为子墨原创&#xff0c;转载请注明出处&#xff01; http://blog.csdn.net/zimo2013/article/details/14647033 1.设计需求 服务器json数据包含新闻类别&#xff0c;新闻类别可以水平滚动&#xff0c;每个类别下包含多条新闻&#xff0c;新闻图片可以自动翻转~ 2.Json数据…
阅读更多...
爬取淘宝图片

爬取淘宝图片

import os import re import urllib.requestimport requestsdef getHtml(url,headers):# 代理设置proxy = urllib.request.ProxyHandler({http: 118.190.95.26:9001}) # 字典# 基本的urlopen不支持代理、cookie等其他Http/Https高级功能,自定义opener()opener = urllib.reques…
阅读更多...
ylb-接口14购买理财产品

ylb-接口14购买理财产品

总览&#xff1a; 在api模块service包&#xff0c;Invest类下添加&#xff08;投资理财产品&#xff0c; int 是投资的结果 &#xff0c; 1 投资成功&#xff09;&#xff1a; package com.bjpowernode.api.service;import com.bjpowernode.api.pojo.BidInfoProduct;import j…
阅读更多...
外包软件定制开发中时间和进度管理

外包软件定制开发中时间和进度管理

引言 时间和进度管理是外包软件定制开发项目中至关重要的方面。有效地管理时间和进度可以确保项目按计划顺利进行&#xff0c;减少延误和风险&#xff0c;从而提高交付的可靠性和质量。然而&#xff0c;由于外包团队和客户位于不同的地理位置和时区&#xff0c;时间和进度管理…
阅读更多...
【Pytorch神经网络实战案例】28 GitSet模型进行步态与身份识别(CASIA-B数据集)

【Pytorch神经网络实战案例】28 GitSet模型进行步态与身份识别(CASIA-B数据集)

1 CASIA-B数据集 本例使用的是预处理后的CASIA-B数据集&#xff0c; 数据集下载网址如下。 http&#xff1a;//www.cbsr.ia.ac.cn/china/Gait%20Databases%20cH.asp 该数据集是一个大规模的、多视角的步态库。其中包括124个人&#xff0c;每个人有11个视角(0&#xff0c;18&am…
阅读更多...
MPP介绍

MPP介绍

MPP即大规模并行处理&#xff08;Massively Parallel Processor &#xff09;。如greenplum&#xff0c;它是一种基于PostgreSQL的分布式数据库&#xff0c;采用Shared-Nothing架构&#xff0c;主机、操作系统、内存、存储都是自我控制的&#xff0c;不存在共享。数据节点通过专…
阅读更多...
最新文章

Copyright @ 2022~2023