讲给Android程序员看的前端教程(08)——HTML5标签(7)

来源：互联网发布：js得到div的高度编辑：程序博客网时间：2024/06/05 21:11

自定义View系列教程00–推翻自己和过往，重学自定义View
自定义View系列教程01–常用工具介绍
自定义View系列教程02–onMeasure源码详尽分析
自定义View系列教程03–onLayout源码详尽分析
自定义View系列教程04–Draw源码分析及其实践
自定义View系列教程05–示例分析
自定义View系列教程06–详解View的Touch事件处理
自定义View系列教程07–详解ViewGroup分发Touch事件
自定义View系列教程08–滑动冲突的产生及其处理

探索Android软键盘的疑难杂症
深入探讨Android异步精髓Handler
详解Android主流框架不可或缺的基石
站在源码的肩膀上全解Scroller工作机制

Android多分辨率适配框架（1）— 核心基础
Android多分辨率适配框架（2）— 原理剖析
Android多分辨率适配框架（3）— 使用指南

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl
本文视频教程：http://www.stay4it.com/my/course/37

课程安排

HTML不是程序设计语言，而是一种标记语言，它用一些标记、标签来说明文本的显示效果。要制作网页和建立网站，就必须对HTML语言有所了解。客观地讲：HTML标签没有多少逻辑性而言，为了大家更好的理解和记忆，我们对这些标签进行分门别类的讲解，主要分为：

HTML常用标签
HTML文本标签
HTML语义标签
HTML结构标签
HTML列表标签
HTML表格标签
HTML表单标签
HTML新增标签和API

嗯哼，来吧，我们继续HTML5标签的学习。咋了？你竟然有点担心学不会！？别逗了，这部分和我们常写的Java比起来简单多了，它的逻辑性也弱得多。所以，大胸弟你大可放心，就像看电影那样：一手拿着爆米花，一手拿着可乐，也完全可以看懂本教程。

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

HTML表单标签

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

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标签可实现下拉选择，比如用户注册时的省份选择。

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

阅读全文

3 0