HTML5表单标签

时间: 2019-09-08阅读: 147标签: 标签

表单简介

Form表单主要用于用户与Web应用程序进行数据的交互,它允许用户将数据发给web应用程序,网页也可以拦截数据的发送以便自己使用。form通常由一到多个表单元素组成,这些表单元素是单行/多行文本框,下拉菜单,按钮,复选框,单选按钮,时间表单元素时 一般要配合label标签,用于描述其目的。其可用属性如下。 

action   用于处理表单信息的应用程序的地址。
method    浏览器用来提交表单的HTTP方法。
get        对应于Http协议的GET方法,表单数据被附加在uri上,使用"?"分隔 
post     对应于Http协议的POST方法,表单数据包含在HTTP协议的请求报文的体部。
name   设定表单的名称
target   表示浏览器接收到form的提交信息后在哪里显示回应。
_self,_blank,_parent,_top这些值和超链接的相同


表单数据的内容类型

通过enctype属性设定表单数据的内容类型

1. application/x-www-form-urlencoded

在发送前编码所有字符(默认)使用到的编码方式:

1)控件的名称和值都被转义,空白字符使用【+】替换,保留的字符一般都是用来实现特定的目的,例如(: / ? ; @ = & 等)。非数字和字母的字符使用%HH(这里 HH表示两个十六进制数字,代表该字符的ASCII码)进行转换,

2)控件的"名称/值"对按照它们在文档数据流中出现的顺序列出来。"名称""值"使 用"="分割,两个"名称/值"之间使用&隔开。

2. multipart/form-data

不对字符编码。在使用包含【文件上传控件】的表单时,必须使用该值。数据分成多个部分,每个部分代表一个结构良好的控件,作为文档数据流的一部分,每一 个部分都按照它们在文档数据流中出现的顺序依次发送到服务器端,并且,每一部分的边界不会出现在数据中。每一部分有一个content-desposition标题头,它的值的格式是: Content-Disposition:form-data;name="myControl"

3. text/plain

空格转换为 "+" 加号,但不对特殊字符编码。


表单组件

input组件用于接受来自用户的数据,其可用属性如下

1、type 用于设定组件类型

text 单行文本框
password 密码框,输入的内容将会被遮挡。
checkbox 复选框,必须使用value属性来描述该组件所提交的值,使用checked属性默认选 中。
radio 单选按钮,必须使用value属性来描述该组件所提交的值,使用checked属性默认 选中。一个单选按钮组中所有组件都应该具有相同的name值,这样,每次只能选中按钮组中的 某一个组件
submit 提交按钮
reset 重置按钮
file文件按钮,该组件用于选中文件系统中的某个文件
hidden 隐藏域,该组件不显示在页面中,但是其值会被提交。
image 图像按钮,必须使用src来加载图片,使用alt来声明替换文本。
button 普通按钮

2、name 用于设定组件类型

3、value 用于设定初始化,可选。     

4、checked 单选框,复选框默认选中属性

5、disabled 表示禁用组件,禁用组件的值也不能被提交

6、size 当前控件的初始宽度,这个宽度以像素为单位。除非控件类型是text, password,这时宽度是整数值,表示字符的数目,默认为20

7、maxlength 指定可以输入的字符的最大值。适用于控件类型为text,password。


fieldset组件用于在一个web表单中对多个控件和标签进行分组

1、disabled 禁用filedset元素,该属性会影响的fieldset的子元素

2、name fieldset元素的名称

fieldset的标题由标签提供

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>Title</legend>
            <input type="radio" id="radio">
            <label for="radio">click me</label>
        </fieldset>
    </form>
</body>
</html>


input/button按钮组件用于接受来自用户的数据,其可用属性如下

按钮控件

1、input的type 指定控件类型:button,submit,reset

2、input的name 按钮名称。

3、input的value 按钮所关联的值,会与name的值一同被提交


label组件用于表示某一表单组件的标题 其可用属性如下

1、for 与为设定标题的表单组件的ID值一致,上面的代码实例有


select组件用于表示下拉列表或列表,其可用属性如下

1、multiple 指定控件类型 布尔类型的值,表示是否允许多选,如果select元素不包含属性size和属性 multiple时,表单类型显示为菜单(组合框),如果使用了属性size和属性multiple中 的任意一个,则表单类型显示为列表框。

2、size 显示的行数 当要表示一个可以滚动的列表时候,size表示同时展示的行数。默认值为0。表 示非列表显示

3、disabled 表示禁用组件,禁用组件的值也不能被提交

4、name 用于指定该组件的名字,会与其option子元素的value值组成键值对随其他表单数据一齐被提交


option组件用于表示选项,常包含<select>、<optgroup>中,其可用的属性如下

1、disabled 表示禁用组件,禁用组件的值也不能被提交

2、value 定义控件的初始值。提交表单时,初始值会被提交给服务器。

3、selected 表示该选项默认被选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <select name="address" id="">
            <option value="北京" disabled>北京</option>
            <option value="上海" selected>上海</option>
            <option value="广州">广州</option>
        </select>
    </form>
</body>
</html>


optgroup组件用于表示option的选项组,常包含在<select>中,其可用的属性如下

1、disabled 表示禁用组件,禁用组件的值也不能被提交

2、label 表示选项组的名称

3、selected 表示该选项默认被选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <select name="address" id="">
            <optgroup label="广东省">
                <option value="广州">广州</option>
                <option value="深圳">深圳</option>
            </optgroup>
            <optgroup label="江苏省">
                <option value="苏州">苏州</option>
                <option value="盐城">盐城</option>
            </optgroup>
        </select>
    </form>
</body>
</html>


textarea组件用于表示多行文本框,没有value属性,其值被包含在标签内 其可用属性如下

1、rows 定义文本框的行数

2、cols 定义文本框的列数

3、warp 表示是否自动换行

  • off 不自动换行

  • hard自动硬回车换行,换行元素一同被传送到服务器中

  • soft自动软回车换行,换行元素不会传到服务器中

4、disabled 表示禁用组件,禁用组件的值也不能被提交

5、readonly 表示该组件只读,其值依然会被提交

6、name 用于指定该组件的名字,会随着其值一同被提交到后台


新增表单组件

progress组件用于表示任务的完成情况,常用于进度条 其可用的属性如下

1、max 定义进度元素所要求的任务的工作量,默认值为1

2、value 定义已经完成的工作量,如果max值为1,该值必须是介于0~1之间的小 数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <progress value="70" max="100"></progress>
    </form>
</body>
</html>


output 组件用于表示用户动作产生的结果 其可用的属性如下

1、name 定义元素的名称

2、for 其他元素的id列表,表明这些元素为计算提供了输入值(或其他影响)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="" oninput="result.value=parseInt(a.value)+parseInt(b.value)">
        <input type="range" name="b" value="50">+
        <input type="number" name="a" value="10">=
        <output name="result"></output>
    </form>
</body>
</html>


meter元素表示规定范围内的数量值。呈现的效果有一个类似于进度条

例如:磁盘使用量,某个候选者的投票人数占 总投票人数的比例等

1、value :在元素中特地表示出来的实际值,该值在min与max之间,如果未指定 ,该值默认为1

2、min :指定规定范围时允许使用的最小值,默认为0

3、max :指定规定范围时允许使用的最大值,默认为1

4、low :规定范围的下限值必须小于或等于high属性的值

5、high :规定范围的上限值(表示较高危险的意思)

6、optimum :最佳值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>He got a <meter low="69" high="80" max="100" value="70">B</meter>on this exam</p>
</body>
</html>

datalist组件表示其他控件可用的值,其值通过<option>作为datalist的子元素存在

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <label for=""> choose a browser from this list:</label>
    <input type="text" name="myBrowser" list="browsers">
    <datalist id="browsers">
        <option value="Chrome">
        <option value="Firefox">
        <option value="Internet Explorer">
        <option value="Opera">
        <option value="Safari">
        <option value="Microsoft Edge">
    </datalist>
</body>
</html>


新增表单属性

type:在H5中,对input的type进行了扩展,可以有更多的取值

1、date 日期控件(年,月,日,不包含时间)

2、datetime-local 日期时间控件

3、time 时间控件

4、month 日期插件(年,月)

5、week 日期插件(年,周),注意:以上只能被chrome,opera支持

6、number 数字控件(只能输入数字)

7、range 范围控件(通过控制条可以调整取值)

8、search 搜索控件,

9、tel 电话控件

10、url 地址控件

11、color 颜色控件

12、email email控件

 

吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

链接: http://www.fly63.com/article/detial/5265

META标签的设置

<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

meta标签中的http-equiv属性使用

http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。 meta标签的http-equiv属性语法格式是:

a标签调用js的几种方法

<a> 标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段。其中javascript:是伪协议,它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:;

总结那些有默认margin,padding值的html标签

h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值。dl标签:有默认margin(top,bottom且相同)值,没有默认padding值。ol,ul标签:有默认margin-(top,bottom且相同)值,有默认padding-left值

XPath当匹配标签判断text()判断内容失败的问题及解决

在爬取网站的时候我使用XPath去抓取网页上的内容,XPath表达式来精准获取需要的标签内容。当我对如下一段html代码编写XPath表达式抓取的时候出现了问题,代码如下。片名两个字中间有七个空格,我想要获取<dd></dd>中的内容。

HTML标签嵌套规则

块级元素总是在新行上开始,高度、行高以及上下边距都可控制,宽度默认是容器的100%,除非设定宽度。行内元素和其他元素都在一行上,高、行高、以及上下边距不可变,宽度就是它的文字和图片的宽度,不可改变。

Html头部meta标签

meta元素有4个属性:name、http-equiv、content、charset.meta标签通过name属性来表述页面文档的元信息,通过http-equiv属性设置http请求指令,通过charset设置页面的字符编码

用css设置a标签无效,让链接跳转失效

这个代码有个坑,就是如果a标签里面放了一个图片,然后给a标签设置这个样式,这个时候是不起效果的,只能在a标签外面包一个div,然后给div设置这个样式

如何将 JavaScript 代码添加到网页中,以及 <script> 标签的属性

本教程的这一部分内容是关于 JavaScript 语言本身的。但是,我们需要一个工作环境来运行我们的脚本,由于本教程是在线的,所以浏览器是一个不错的选择。我们会尽可能少地使用浏览器特定的命令(比如 alert)

<a>标签中href=javascript:与href=#

将href=#是指联接到当前页面,其实是无意义的,页面也不会刷新。这是一个锚链接。在制作网页时html语言里的参数,用于指定链接的url ####就是本页链接,href=地址,就是链接到地址 链接本页面 默认本页,不弹出新窗口,空连接时,如果去掉#

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全