day4HTML表单元素分类文档详解

最新推荐文章于 2024-08-07 19:04:22 发布

小承诺·

最新推荐文章于 2024-08-07 19:04:22 发布

阅读量188

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_44650190/article/details/119849995

版权

本文详细介绍了HTML表单的使用，包括

摘要由CSDN通过智能技术生成

html表单

HTML表单用于收集用户输入，可以提交数据到服务器，使页面具有交互性

标签<form>

提交的数据

</form>

双标记，块级元素

注意：form之间不能相互嵌套，但是一个页面可以包含多个form

属性

name:表单提交时的名称

action:提交到的地址

method:提交方式，有get和post两种，默认为get

method属性规定了在提交表单时所用的HTTP方法(GET或POST)

get是默认方法：表单提交是被动的(比如搜索引擎查询)，并且没有敏感信息时使用get。使用get，表单数据在

页面地址栏中是可见的：get适合少量数据的提交，浏览器会设置容量限制

post：表单正在更新数据，或者包含敏感信息(例如密码)。post的安全性更高，因为在页面地址中被提交的数据是不可见的。

注：get和post的区别：

1.数据提交方式，get把提交的数据url可以看到（会在地址栏中显示），post看不到（post安全）

2.get一般用于提交少量数据(不能大于2kb)，post用来提交大量数据（理论上没有限制）

HTML表单包含表单元素

表单元素指的是不同类型的input元素、复选框、单选按钮、提交按钮等等。

<input>元素：是最重要的表单元素

<input>的type属性取值有：

①text 定义常规文本输入

②radio 定义单选按钮输入(选择多个选择之一)

③submit 定义提交按钮(提交表单)

④password 定义密码输入

input的属性

name属性：如果要正确地被提交，每个输入字段必须设置一个name属性。

其他属性：

value属性规定输入字段的初始值：

readonly属性规定输入字段为只读(不能修改)

disabled属性规定输入字段是禁用的

size属性规定输入字段的尺寸

maxlength属性规定输入字段允许的最大长度

<form>的action属性

action属性定义在提交表单时执行的动作

向服务器提交表单的通常做法是使用提交按钮

通常，表单会被提交到web服务器上的网页

表单元素

一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮。

1.表单标签

是指<form>标签本身，它是一个包含表单元素的区域，使用<form></form>定义

2.表单域

是<form>标签中用来收集用户输入的每一项，通常用input标签来定义，input标签有不同的类型，对应用户不同的数据。

（比如：文本域、下拉列表、单元框、复选框等等）

3.表单按钮

用来提交<form>表单中的所有信息到服务器

注：表单域和表单按钮都属于表单元素

表单域

普通文本框 <input type="text" >

密码框 <input type="password">

单选框 <input type="radio" name="">(要有name属性，同name的按钮只能选一个这样才能达到目的）

复选框 <input type="checkbox">

提交按钮 <input type="submit"> （可以添加属性value="登录"改变显示的汉字 eg:显示登录）

重置按钮 <input type="reset"> （可以添加属性value="取消"改变显示的汉字 eg:显示取消）

没有任何功能的按钮 <input type="button"> （可以添加属性value="没有任何功能的按钮" 使这个按钮显示汉字 eg:显示没有任何功能的按钮）

提交按钮 <button>提交</button>（不写type=“”是因为默认type类型是submit）按钮显示的字在双标记之间

重置按钮 <button type="reset">重置</button> 按钮显示的字在双标记之间

没有任何功能的按钮 <button type="button"> 没有任何功能的按钮</button>按钮显示的字在双标记之间

select：下拉列表

option：下拉列表的选项、选择框

</select>

textarea:多行文本框/文本域 text 文本 area 域

col：列

row:行

label 标签提升用户体验度没有任何样式在单/多选框中使用当点击label之间的内容，相关的标签会被选中

<label for="">...</label> 之间的内容是文本

label的for属性和表单元素的id属性一致当点击label之间的内容，相关的标签会被选中

(不用点单/多选框点文本就可以选中单/多选框)

lable标签的for属性的值和实现单/多选框的表单中的 id属性的值一致那么汉字和单/多选框就可以对应起来实现点文字就可以选单/多选框的功能

eg:<label for="man">男</label>

补充：1.文件

选择一个文件：<input type="file">

注意：默认的表单编码格式不支持上传文件，当表单元素有文件时，需要把表单的编码格式改为二进制，formenctype="multipart/form-data"

2.隐藏域

定义隐藏字段，隐藏字段对于用户是不可见的。但它携带的信息可以正常提交。隐藏字段常常存储默认值，或者由JavaScript改变它们的值。

3.图片提交按钮：

<input type="image" src="2.jpg">定义文件选择字段和“浏览...”按钮，供文件上传

HTML元素分类

大多数HTML元素被定义为块级元素或内联元素。

块级元素eg：<h>、<p>、<ul>、<table>等

特点：独占一行、元素上下有空白、在网页排列方式：从上到下、可以改变元素的宽度和高度。

行内元素也称为内联元素eg:<b>、<td>、<a>、<img>、以及所有文本格式化标签

特点：内联元素在显示时通常不会以新行开始。在网页中的排列方式：从左到右，不可以改变元素的宽度和高度。

iframe框架

iframe用于在网页内显示网页(在一个页面引入另一个页面，比如可以写一个页面头部然后在另一个html中引入这个页面)

height和width属性用于规定iframe的高度和宽度。属性值的默认单位是像素，但也可以用百分比来设定。

frameborder属性规定是否显示iframe周围的边框。设置属性值是0就可以移除边框

frameset标签

框架结构标签(<frameset>)(在一个页面中引入多个页面，分屏显示)

框架结构标签(<frameset>)定义如何将窗口分割为框架,每个frameset定义了一系列行或列

结构：eg:<frameset cols="25%,75%" noresize="noresize">

</frameset>

属性：cols表示竖直分屏 rows表示水平分屏 rows/columns的值规定了每行或每列占据屏幕的面积

noresize="noresize"表示中间的分割线不可移动

注意：不能将<body></body>标签与<frameset></frameset>标签同时使用

HTML文档详解

<!DOCTYPE html>

文档类型声明帮助浏览器正确的显示网页

作用：告诉浏览器按当前标准解析代码

!DOCTYPE HTML5的文档类型声明

HTML不区分大小写双标记的结束标记可以省略单标记的/可以省略（不推荐）

HTML4.01 3个版本严格过渡框架

XHTML 严格的HTML，区分大小写，结束标记必须写上

删除文档类型声明：

删除后浏览器为混杂模式，各个浏览器会按照自己的标准解析代码

加上文档类型声明，浏览器为标准模式都按照当前标准解析代码

DTD文档=有文档类型声明=doctype

document:文档

注意：文档类型声明<!DOCTYPE html>不是标签

<html lang="en">

lang="en"对页面主要语言进行声明

en表示英语

zh-CN表示中文字符集

中文开发网站常用utf-8

国外常用gbk

<head>元素是所以头部元素的容器

head中常用标签：meta、title、link、style、script，base，link等

title标签：定义文档的标题是必需的

作用：

①它显示在浏览器窗口的标题栏或状态栏上。

②当把文档加入用户的收藏夹或书签列表时，标题将成为该文档的默认名称

③显示在搜索引擎结果中的页面标题

注：<title>标签是<head>标签中唯一必须要求包含的东西，就是说写head一定要写title,(title一定要加)

meta标签

META标签用来描述一个HTML网页文档的属性，此处charset="utf-8"是说当前使用的是utf-8编码格式

link标签

link标签定义文档与外部资源之间的关系

link标签最常用于连接样式表

style标签

style标签用于为HTML文档定义样式信息

可以在style元素内规定HTML元素在浏览器中呈现的样式

script标签

script标签用于定义客户端脚本，比如JavaScript

base标签(不常用)

base标签定义网页中所有的a的默认跳转

HTML合法取色

颜色由红色，绿色，蓝色混合而成

颜色可以用一个十六进制符号来定义，或者由红色、绿色和蓝色的值组成(RGB)

每种颜色的最小值是0(十六进制：#00)。最大值是255(十六进制：#ff)

eg：color：rgb(12,36,138) color:red color:#aabbcc

小承诺·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day4HTML表单元素分类文档详解

html表单HTML表单用于收集用户输入，可以提交数据到服务器，使页面具有交互性标签<form>提交的数据 </form>双标记，块级元素注意：form之间不能相互嵌套，但是一个页面可以包含多个form属性<formaction="提交的地址"name="表单的名称"method="提交的方式get/post"></for...
复制链接

扫一扫