HTML5的相关知识学习笔记（二）

最新推荐文章于 2022-11-01 16:21:33 发布

治愈系的江予夺

最新推荐文章于 2022-11-01 16:21:33 发布

阅读量288

点赞数

分类专栏： HTML+CSS 前端文章标签： html5 html

本文链接：https://blog.csdn.net/Alanrnzearn/article/details/105097255

版权

前端同时被 3 个专栏收录

32 篇文章 0 订阅

订阅专栏

HTML+CSS

4 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

二续的HTML学习主要是讲到表单的相关知识点，下列就是本次关于表单学习的一些知识点囊括情况。

表单

From表单用于用户与web应用程序进行数据交互，它允许用户将数据发给web应用程序，网页也可以拦截数据的发送以便自己使用。

使用表单控件时一般要与label标签配合使用，用于描述其目的。

action：用于处理表单信息
method：浏览器用来提交表单的http方法，常用get/post。

get: 对应于http协议的get方法，表单标签被附在url上，使用“？”分隔
post: 对应于http协议的post方法，表单标签被包含在http协议的请求报文的体部

name：设定表单的名称
target：代表响应打开的方式

_self，_blank，_parent，_top

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

application / x-www-from-urlencoded
multipart / from-data
text / plain

input表单组件

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

type属性

text 单行文本输入框
password 密码框
checkbox 复选框，默认选中，必须用value来表示该组件提交的值
radio 单选按钮
submit 提交按钮
reset 重置按钮
file 文件选择按钮，文件上传按钮
form默认的enctype设置成的multipart/form-data。method设置成post提交方式。
form默认的enctype设置成的application/-from-urlencoded。特殊字符的ASCII码。method默认get提交方式。
hidden 隐藏域
img 图片按钮 (src alt width height)
button 普通按钮

一些具体相关按钮代码举例：

提交按钮：

<input type="submit" value="">
<input type="image" src="" alt="">
<button type="submit"></button>
<button></button>写在表单内部的button按钮

重置按钮：

<input type="reset" value="">
<button type="reset"></button>

普通按钮：

  <input type="button" value="">
  <button type="button"></button>

表单控件

fieldset组件用于在一个web表单中对多个控件和标签进行分组。fieldset的标题由<legend>标签提供

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

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

button表单组件的type属性用于表示控件类型，name属性用来表示按钮名称。

select表单控件[select用于下拉列表或列表]

multiple 指定控件类型（布尔类型的值）
size 显示的行数。当要表示一个可以滚动的列表时候，size表示同时展示

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

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

rows 定义文本框的行数
cols 定义文本框的列数
warp 表示是否自动换行。 (1)off 不自动换行。 (2)hard 自动硬回车换行，换行元素一同传送到服务器中。(3)soft 自动软回车换行，换行元素不会传到服务器中
disabled 表示禁用组件，禁用组件的值也不能被提交
readonly 布尔属性，表示该组件只读，其值依然会被提交。
name 用于指定该组件的名字，会随着其值一同被提交到后台中。

巩固学习

表单控件的布尔属性：

disabled 禁用的，可见不提交
readonly 可见只读提交
selected option标签上选中的option
checked 单选按钮和复选框上，选中的
multiple select标签上，是否允许多选，可摁住Ctrl多选
…
autofocus 自动对焦

type属性

number 数字控件（只能输入数字）可以与属性min、max、step配合使用
range 范围控件（通过控制条调整值）可以与属性min、max、step配合使用
search 搜索控件
tel 电话控件
color 颜色控件
url 地址控件
eamail 邮箱控件
date 日期控件（年月日，不包含时间）火狐支持
time 时间控件火狐支持
datetime-local 日期时间控件
month 月插件
week 周插件

注：大部分的控件只能在Chrome和Opera浏览器显示

H5新增的type属性值通过代码举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>h5新增的type属性</title>
</head>
<body>
    <h3>h5新增的type属性值</h3>
    <form action="">
        <div>
            <label for="">年龄：</label>
            <!-- step步长，加多少或者减多少 -->
            <input type="number" name="age" id="" min="15" max="90" step="10">
        </div>
        <div>
            <label for="">搜索：</label>
            <input type="search" name="search" id="">
        </div>
        <div>
            <label for="">滑块：</label>
            <!-- 默认取值0-100  可以通过min和max设置大小范围 step属性是指的滑动步长-->
            <input type="range" name="range" id="" min="10" max="20" step="5">
        </div>
        <div>
            <label for="">电话号码：</label>
            <!-- pattern表单验证的属性，属性值是正则表达式，\d代表的是数值0-9 {}里放的是次数限制 -->
            <input type="tel" name="tel" id="" maxlength="11" pattern="1\d{10}">
        </div>
        <div>
            <label for="">网址：</label>
            <input type="url" name="url" id="">
        </div>
        <div>
            <label for="">颜色：</label>
            <input type="color" name="color" id="">
        </div>
        <div>
            <label for="">邮箱：</label>
            <input type="email" name="email" id="" pattern="[a-z]{1,}@[a-z]{1,}\.com">
            <!-- \w  字母1到多次 \w+@\w+\.com-->
            <!-- [a-z]{1,}   字母a-z一到多次 -->
        </div>
        <div>
            <label for="">日期控件：</label>
            <input type="date" name="date" id="">           
        </div>
        <div>
            <label for="">日期时间控件：</label>
            <input type="datetime-local" name="datetime-local" id="">           
        </div>
        <div>
            <label for="">时间控件：</label>
            <input type="time" name="time" id="">           
        </div>
        <div>
            <label for="">月控件：</label>
            <input type="month" name="month" id="">           
        </div>
        <div>
            <label for="">周控件：</label>
            <input type="week" name="week" id="">           
        </div>
        <button>提交</button>
    </form>
</body>
</html>

上述演示代码操作后的效果图显示如下

在这里插入图片描述

治愈系的江予夺

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5的相关知识学习笔记（二）

二续的HTML学习主要是讲到表单的相关知识点，下列就是本次关于表单学习的一些知识点囊括情况。表单From表单用于用户与web应用程序进行数据交互，它允许用户将数据发给web应用程序，网页也可以拦截数据的发送以便自己使用。使用表单控件时一般要与label标签配合使用，用于描述其目的。action：用于处理表单信息method：浏览器用来提交表单的http方法，常用get/post。...
复制链接

扫一扫

专栏目录