免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
12
最近访问板块 发新帖
楼主: didimm
打印 上一主题 下一主题

《html5+css3技术应用》(连载) [复制链接]

论坛徽章:
0
11 [报告]
发表于 2013-05-20 13:14 |只看该作者
表2-2  enctype和formenctype属性的取值和说明
属    性    值        说               明
application/x-www-form-urlencoded        默认形式,以超文本的形式编码。
multipart/form-data        以二进制形式编码。
text/plain        以普通文本的形式编码。
application/x-www-form+xml        以XML结构化数据格式编码。
在上面四种编码方式中,“application/x-www-form+xml”是在Html5 Web Form新增加的编码方式,这种编码方式以XML结构化数据的格式进行编码表单内容,可以更有效地降低服务器负载压力。
此外,对于文件上传输入类型控件,enctype属性必须将设置为“multipart/form-data”的,因为在文件上传时,只有使用二进制形式编码,才可以保证表单数据连续地传送到服务器。
对于enctype属性的具体使用,读者可以参考下面的代码。
HTML代码:test_enctype.html。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
        <form action="#" method="POST" enctype="text/plain">
                <p>
                        姓名:
                        <input type = "text" name="user_name"/>
                </p>
                <p>
                        密码:
                        <input type = "password" name="user_password"/>
                </p>
                <input type="submit"/>
        </form>
</body>
</html>
•        enctype属性用来指定表单数据在发送到服务器之前进行编码的编码方式。
•        上述代码中,表示以普通的文本形式对表单内容进行编码。
accept 属性用来指定能够通过文件上传进行提交的文件类型。这个属性也是可选的,属性值是一个或多个MIME类型,多个MIME类型要使用逗号隔开。
对于accept属性的具体使用,读者可以参考下面的代码。
HTML代码:test_accept.html。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
        <form method = "POST" enctype = "multipart/form-data" action = "#" accept ="image/gif,image/jpeg" >
                <p>
                        图片文件: <input type="file" name="pic" id="pic" />
                </p>
                <input type="submit" value="开始上传" />
        </form>
</body>
</html>
•        file是文件上传输入类型控件。
•        accept 属性用来指定能够通过文件上传进行提交的文件类型。
•        enctype属性用来指定表单数据在发送到服务器之前进行编码的编码方式
•        在上面的表单代码中,只有gif和jpg文件才能进行文件上传。
accept-charset 属性用来指定服务器处理表单数据所接受的字符集。这个属性是可选的,用的也不多,但不并不代表它不重要。例如,我们在使用GBK的编码的表单向使用UTF-8编码的Web应用程序里提交数据,如果没有使用accept-charset属性,肯定是会乱码的。accept-charset的原理非常简单,开发人员制定了字符集后,服务器就会使用指定的字符集来解释表单数据。表2-3列举了accept-charset可以设置的常用字符集。

论坛徽章:
0
12 [报告]
发表于 2013-05-20 13:17 |只看该作者
表2-3  accept-charset可以设置的常用字符集。
字符集名称        说               明
ASCALL        万维网最早使用的字符集。支持 0-9 的数字,大小写英文字母以及一些特殊字符。
UTF-8        可以表示 Unicode 标准中的任意字符,已成为网页和电子邮件的首选编码。
ISO-8859-1        现在浏览器默认的字符集,通过了国际标准认证,基本上定义了世界各地字符。
GBK        GBK是一个汉字编码标准,支持所有的中文字符。
在理论上,我们可以使用任何字符集,但问题是并不是所有服务器都能够解释它们。所以最简单的方法还是将表单和应用程序所使用的字符集统一。
对于accept-charset属性的具体使用,读者可以参考下面的代码。
HTML代码:test_accept-charset.html。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
        <form action = "#" method = "get" accept-charset = "UTF-8">
                <p>
                        姓名: <input type = "text" name = "name" />
                </p>
                <p>
                        密码: <input type = "password" name = "password" />
                </p>
                <input type = "submit" value = "提交" />
        </form>
</body>
</html>
•        accept-charset 属性用来指定服务器处理表单数据所接受的字符集。
•        上述代码表示服务器使用UTF-8字符集处理表单数据。

论坛徽章:
0
13 [报告]
发表于 2013-05-20 13:18 |只看该作者
target属性用来指定浏览器在提交表单后生成的页面加载到哪个框架或者浏览窗口。这个属性是可选的,读者可能了解<a>标签的target属性,使用方法其实是一样的。表2-4 对target属性的取值和说明进行了归纳。
表2-4  target属性的取值和说明
Target属性值        说             明
_blank        在新窗口中打开
_parent        在父框架中打开。
_self        在当前的框架中打开。
_top        在整个窗口中打开。
framename        在指定的框架中打开。
对于target属性的具体使用,读者可以参考下面的代码。
HTML代码:test_target.html。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
        <form action = "#" method = "POST" target="_parent">
                <p>
                        姓名: <input type = "text" name = "name" />
                </p>
                <p>
                        密码: <input type = "password" name = "password" />
                </p>
                <input type = "submit" value = "提交" />
        </form>
</body>
</html>
•        target属性用来指定浏览器在提交表单后生成的页面加载到哪个框架或者浏览窗口。
•        上述代码表示在当前表单窗口的父窗口中打开生成的页面。
id属性和name属性都是用来标识网页中的<form>标签,我们进行表单的样式设计和表单的脚本控制都需要用到表单的id属性或者name属性来获取相应的表单容器对象。这个属性我们再熟悉不过了,这里就不再作进一步探讨。
novalidate属性用来指定浏览器是否启用表单验证功能,是Html5 Web Form中新增的可选属性。novalidate 的属性值是布尔值。前面我们已经讨论过,Html5 Web Form中的输入控件带有强大的表单验证功能。某些时候,我们也可以通过novalidata属性来关闭这些验证功能。
对于novalidate属性的具体使用,读者可以参考下面的代码。
HTML代码:test_novalidate.html。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
        <form action = "#" method = "POST" novalidate = "novalidate">
                <p>
                        姓名: <input type = "text" name = "name" />
                </p>
                <p>
                        密码: <input type = "password" name = "password" />
                </p>
                <input type = "submit" value = "提交" />
        </form>
</body>
</html>

论坛徽章:
0
14 [报告]
发表于 2013-05-20 13:19 |只看该作者
•        novalidate属性用来指定浏览器是否启用表单验证功能。
•        在上面的代码中,我们关闭了表单内置的验证功能。
autocomplete属性用来指定浏览器是否启用自动完成功能,也是Html5 Web Form中新增的可选属性,如果我们开启了浏览器的自动完成功能,那么在用户在表单中开始键入值时,浏览器会把用户之前的输入过的值的列表显示出来,供用户选择。表2-5对autocomplete属性的取值和说明进行了归纳。
表2-5  autocomplete属性的取值和说明进行了归纳
Autocomplete的取值        数                码
On        默认设置,开启自动完成功能。
Off         关闭自动完成功能。
对于autocomplete属性的具体使用,读者可以参考下面的代码。
HTML代码:test_autocomplete.html。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
        <form action = "#" method = "POST" autocomplete = "off">
                <p>
                        姓名: <input type = "text" name = "name" />
                </p>
                <p>
                        密码: <input type = "password" name = "password" />
                </p>
                <input type = "submit" value = "提交" />
        </form>
</body>
</html>
•        autocomplete属性用来指定浏览器是否启用自动完成功能。
•        在上面的代码中,我们指定浏览器关闭自动完成功能。
2.2.2  表单结构的元素标签
在Html5 Web Form中,为了带给用户良好地服务体验,在保留了一些优秀的表单元素标签的同时,也加入了一些新的元素标签。本小节我们将一起讨论这些元素标签的使用,这些表单元素标签主要有以下几个。
•        label标签
•        input标签
•        button标签
•        fieldset标签
•        lenged标签
•        select标签
•        <optgroup> 标签
•        textarea标签
•        datalist标签
•        output标签
•        keygen标签
label标签用来设置输入型控件的说明信息,这是一个很有用的标签。虽然label 元素不会向用户呈现任何特殊效果,但是如果用户在 label 元素内点击文本,就会触发此控件,换句话说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
对于label标签的具体使用,读者可以参考下面代码。

论坛徽章:
0
15 [报告]
发表于 2013-06-29 21:31 |只看该作者

学习了
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号:11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们:huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP