HTML个人笔记之二 表单

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了HTML个人笔记之二 表单，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8291字，纯文字阅读大概需要12分钟。

内容图文

HTML个人笔记之二

表单（Form）

定义

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

Form标签可用属性

• action 用于处理表单信息的应用程序的地址。

• method 浏览器用来提交表单的HTTP方法，常用的get/post。

  • get 对应于Http协议的GET方法，表单数据被附加在uri上，使用"?"分隔
    post 对应于Http协议的POST方法，表单数据包含在HTTP协议的请求报文的体部。

• name 设定表单的名称

• target 表示浏览器接收到form的提交信息后在哪里显示回应。

  • _self 在当前选项卡打开响应内容
    _blank 在新选项卡打开响应内容

表单数据的内容类型

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

• application/x-www-form-urlencoded
  在发送前编码所有字符（默认）使用到的编码方式：
  1）控件的名称和值都被转义，空白字符使用【+】替换，保留的字符一般都是用来实现特定的目的，例如（: / ? ; @ = &等）。非数字和字母的字符使用%HH（这里HH表示两个十六进制数字，代表该字符的ASCII码）进行转换
  2）控件的“名称/值”对按照它们在文档数据流中出现的顺序列出来。“名称”“值”使用“=”分割，两个“名称/值”之间使用&隔开。(查询字符串)

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

• text/plain 空格转换为 “+” 加号，但不对特殊字符编码。

Input表单控件

Input控件用于接受来自用户的数据
type属性，用于设定控件类型，取值如下：

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

Input控件用于接受来自用户的数据，其他可用属性如下

• name 用于设定控件名和提交数据的属性名
• value 用于控件值初始化，可选
• checked 单选框，复选框默认选中属性
• disabled 表示禁用组件，禁用组件的值也不能被提交
• size 当前控件的初始宽度，这个宽度以像素为单位。除非控件类型是text, password，这时宽度是整数值，表示字符的数目，默认为20
• maxlength 指定可以输入的字符的最大值。适用于控件类型为text,password。

button表单控件

按钮控件，在form表单内的<button></button>按钮有提交表单的功能。其可用属性如下

• type 指定控件类型
  取值：button，submit，reset
• name 按钮名称

label表单控件

label 用于表示某一表单控件的标题

• for 与为设定标题的表单控件的ID值一致
  例子

<!-- 简单例子 -->
    <label>Click me <input type="text"></label>

<!-- 使用for -->
    <label for="username">Click me</label>
    <input type="text" id="username">

select表单组件

select用于表示下拉列表或列表，其可用属性如下

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

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

• disabled 表示禁用控件，禁用控件的值也不能被提交

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

option表单组件

option用于表示选项，常包含在 <select>, <optgroup>中

• disabled 表示禁用组件，禁用组件的值也不能被提交

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

• selected 表示该选项默认被选中

  <select name="select">
        <option value="value1">value1</option>
        <option value="value2" selected>value2</option>
        <option value="value3">value3</option>
    </select>

optgroup表单组件

optgroup用于表示包含option的选项组，常包含在 <select>中

• disabled 表示禁用组件，禁用组件的值也不能被提交

• label 表示选项组的名称

<select>
        <optgroup label="group 1">
            <option>option 1.1</option>
        </optgroup>
        <optgroup label="group 2">
            <option>option 2.1</option>
            <option>option 2.2</option>
        </optgroup>
        <optgroup label="group 3">
            <option>option 3.1</option>
            <option>option 3.2</option>
            <option>option 3.3</option>
        </optgroup>
    </select>

textarea

textarea用于表示多行文本框，没有value属性，其值被包含在标签内

• rows 定义文本框的行数

• cols 定义文本框的列数

• disabled 表示禁用控件，禁用组件的值也不能被提交

• readonly 表示该控件只读，其值依然会被提交

• name 用于指定该控件的名字，会随着其值一同被提交到后台

fieldset控件

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

• disabled 禁用filedset元素，该属性会影响fieldset的子元素
• name fieldset元素的名称
  fieldset的标题由<legend>标签提供

    <form action="test.php" method="post">
        <fieldset>
            <legend>title</legend>
            <input type="radio" id="radio">
            <label for="radio">Click me</label>
        </fieldset>
    </form>

新增表单元素

progress

progress表示任务的完成情况，常用于进度条

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

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

    <progress value="80" max="100">80%</progress>

output

output 表示用户动作产生的结果

• name 定义元素的名称

• for 其他元素的id列表，表明这些元素为计算提供了输入值(或其他影响)，语义上的含义，但是未实现功能。

   <form 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">60</output>
    </form>

meter

meter元素表示规定范围内的数量值。例如：磁盘使用量，某个候选者的投票人数占总投票人数的比例等

• value 在元素中特地表示出来的实际值，该值在min与max之间，如果未指定，该值默认为1
• min 指定规定范围时允许使用的最小值，默认为0
• max 指定规定范围时允许使用的最大值，默认为1
• low 规定范围的下限值必须小于或等于high属性的值
• high 规定范围的上限值（表示较高危险的意思）
• optimum 最佳值，最优值 例如：

<meter low="69"
   high="80" max="100" value="84">B</meter>

• 如果optimum<low，value越低越好

  • value<low，是绿色

  • low<=value<=high，是黄色

  • value>high，是红色

• 如果low<=optimum<=high，或者没有optimum，value在中间最好

  • low<=value<=high，是绿色，其他为黄色

• 如果optimum>high，value越高越好

  • value<low，是红色

  • low<=value<=high，是黄色

  • value>high，是绿色

datalist

datalist表示其他控件可用的值，其值通过作为datalist的子元素存在

<label>choose a browser from this list:
        <input list="browsers" name="myBroeser">
    </label>
    <datalist id="browsers">
        <option value="Chrome"></option>
        <option value="Firefox"></option>
        <option value="Internet Explorer"></option>
        <option value="Opera"></option>
        <option value="Safari"></option>
        <option value="Microsoft Edge"></option>
    </datalist>

与select的option的对比

• 如果在option标签内部写了内容的话，点击option之后，datalist显示的是option的value，select那边显示的是option的元素内容。

• 数据提交都提交的是option的value值

• datalist在火狐和谷歌上显示的区别，火狐上只显示内容，谷歌上显示value跟内容

type属性扩展

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

• number 数字控件（只能输入数字） 属性min,max,step可以配合使用

• range 范围控件（通过控制条调整值）属性min,max,step可以配合使用

• search 搜索控件

• tel 电话控件

• url url地址控件

• email email控件，有校验功能

• color 颜色控件

• date 日期控件（年，月，日，不包含时间），火狐支持，谷歌支持

• time 时间控件，火狐支持，谷歌支持

• datetime-local 日期时间控件，暂时火狐不支持，谷歌支持

• month 月插件（年，月），暂时火狐不支持，谷歌支持

• week 周插件（年，周）暂时火狐不支持，谷歌支持

form

在H5中，可以将表单内的从属元素书写在页面上的任何地方，然后为该元素指定一个form属性，属性值为该表单的id。

formaction

一般用于提交按钮和图片按钮上，用于指定处理表单提交的后台程序，可以重写form中的action属性。

formenctype

一般用于提交按钮和图片按钮上，用于指定处理表单的内容类型。

formmethod

一般用于提交按钮和图片按钮上，用于指定表单的提交方式。

formnovalidate

一般用于提交按钮和图片按钮上，布尔类型，提交时表单不被验证。

formtarget

一般用于提交按钮和图片按钮上，用于指定表单提交后在哪里显示响应页面。

autofocus

当页面加载完毕的时候，默认聚焦。在页面中，只能有一个表单元素具有该属性，值为boolean类型

list

取值为元素的id，用于显示提示内容。

max/min

表单组件能够接受到的最大值/最小值。

placeholder

对用户的输入进行提示，常用于搜索框，不要出现回车换行。

pattern

取值为正则表达式，用于表单验证。
比如验证手机号：pattern=”1\d{10}” maxlength=“11”
验证邮箱：pattern=”\W+@\W+.com”

required

表示在表单提交之前必须表单组件中必须输入值

内容总结

以上是互联网集市为您收集整理的HTML个人笔记之二 表单全部内容，希望文章能够帮你解决HTML个人笔记之二 表单所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端