HTML个人笔记之二表单

最新推荐文章于 2024-07-24 16:55:14 发布

墨辰辰辰辰辰

最新推荐文章于 2024-07-24 16:55:14 发布

阅读量88

点赞数

分类专栏：个人笔记文章标签： html web

本文链接：https://blog.csdn.net/m0_46469077/article/details/115383752

版权

个人笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>