HTML基础——表单的构成、HTML5的新增内容

最新推荐文章于 2023-09-05 12:09:46 发布

原创最新推荐文章于 2023-09-05 12:09:46 发布 · 808 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html

html 专栏收录该内容

8 篇文章

订阅专栏

本文深入解析HTML5中的表单控件与新增元素，包括文本框、密码框、下拉列表、多行文本框及HTML5新增的电子邮件、搜索、URL等类型输入控件，同时介绍了placeholder、multiple、autofocus等新属性。

表单

基本介绍

用来提交到数据库的信息
各个信息都是通过输入框，按钮（控件）来进行提交
< form action＝"url" method=get|post name=“myform” >

  -name：表单提交时的名称
  -action：提交到的地址
  -method：提交方式，默认为get

post和get区别：
1.数据提交方式，get把提交的数据url可以看到，post看不到
2.get一般用于提交少量数据，post用来提交大量数据
3.get最多提交1K数据，post理论上没有限制
4.get提交的数据在浏览器历史记录中，安全性不好

基本组成

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

1.表单标签
是指标签本身，它是一个包含表单元素的区域，使用定义

2.表单域
是标签中用来收集用户输入的每一项，通常用input标签来定义，input标签有不同的类型，对应用户不同的数据。（比如：文本域、下拉列表、单选框、复选框等等）

3.表单按钮
用来提交表单中的所有信息到服务器
* 表单域和表单按钮都属于表单元素。

单行文本框<input type="text" >默认值是type="text"
密码框<input type="password"/>　
单选按钮<input type="radio" name=””/>
复选框<input type="checkbox"/>
隐藏域<input type="hidden"/>
文件上传<input type="file"/>
  下拉框<select>标签
       <select><option value="1">北京</option></select>
多行文本<textarea></textarea>
提交按钮<input type="submit"/>
普通按钮<input type="button"/>
重置按钮<input type="reset"/>

控件介绍

文本框

< input type=“text” />
属性：
name:定义控件名称
value：指定控件初始值

密码框

< input type=“password” />
属性：
name:定义控件名称
value：指定控件初始值

单选按钮

< input type=“radio” />
属性：
name:定义控件名称
value：指定控件初始值
checked：设置控件初始状态是否被选中

复选框

< input type=“checkbox” />
属性：
name:定义控件名称
value：指定控件初始值
checked：设置控件初始状态是否被选中

爱好:
	  <input type="checkbox" checked/>游戏
         <input type="checkbox"/>唱歌
         <input type="checkbox"/>跳舞

文件

< input type=“file”/>
属性：
name:定义控件名称
使用file类型的input时要注意以下几点
1.form表单的method属性值要为post
1.form要加enctype="multipart/form-data"属性，这个属性说明了我们的文件以二进制方式传输文件，因为我们计算机本身最底层都是以二进制来显示、传输。
默认地，表单数据会编码为 “application/x-www-form-urlencoded”，不能用于文件上传

 <form action="" method="post" enctype="multipart/form-data">
	<input type="file" name="file1"/>
 </form>

按钮

< input type=“button” />
属性：
name:定义控件名称
value：指定控件初始值

提交按钮

< input type=“submit” />
属性：
name:定义控件名称
value：指定按钮表面显示文字

重置按钮

< input type=“reset” />
属性：
name:定义控件名称
value：指定按钮表面显示文字

图像图片按钮

< input type=“image” src=“URL”/>
属性：
name:定义控件名称
src：指定图像地址

按钮

< button>按钮< /button>
属性:
type:button/submit/reset,默认值为submit

下拉列表框

<select>
	<option>选项</option>
	<option>选项</option>
	<option>选项</option>
</select>

select属性：
name:此列表框的名字
multiple：多选，不用赋值
size :规定下拉列表中可见选项的数目(显示几行)
disabled:规定禁用该下拉列表
option属性：
selected ：用来指定默认的选项
value：用来给< option>指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用区域的名字的value 属性来获得该区域选中的数据项的

下拉分组列表

	<optgroup label="北京">
	<option value="1">东城区</option>
	<option value="2">西城区</option>
	<option value="3">海淀区</option>
	</optgroup>
	<optgroup label="河北省">
		<option value="4">石家庄</option>
		<option value="5">保定市</option>
		<option value="6">沧州市</option>
	</optgroup>
</select>

多行文本框

< textarea>< /textarea>
属性：
cols ：这文字区块的宽度
rows ：这文字区块的行数，即其高度

< textarea name="" id="" cols=“30” rows=“10”>< /textarea>

label 点击文字选择

标签为 input 元素定义标注。
abel是input的描述，它本身不会有特殊效果，但它和其它input标签使用可以提升用户的使用体验，用户不用非得点击到按钮，而是点击文字即可选中，如“记住密码”

  <label for="pwd">记住密码</label>
  <input type="checkbox" name="pwd" id="pwd" />

*通过label的for指向按钮的id来绑定，for和id属性的值要相同

<form>
	<labllel for="male">Male</label>
	<input type="radio" name="sex" id="male" />
</form>

<label>标签一般和radio、checkbox类型一起使用。

fieldset元素集

fieldset 元素可将表单内的相关元素分组，通常和legend标签一起用，legend标签定义了fieldset的提示信息，fieldset是块级元素。

<fieldset>
		     <legend>健康信息</legend>
 身高：<input type="text" />
 体重：<input type="text" />
</fieldset>

HTML5新增控件

电子邮件类型

功能描述：输入E-mail地址的文本框
语法：< input type=“email”/>
注意：输入的内容中必须包含"@"，"@"后面必须具有内容

搜索类型

功能描述：输入搜索关键字的文本框
语法：< input type=“search”/>

URL类型

功能描述：输入WEB站点的文本框
语法：< input type=“url”/>
注意：输入的内容中必须包含"http://"，后面必须有内容

颜色类型

功能描述：预定义的颜色拾取控件
语法：< input type=“color”/>

数字类型

功能描述：只能接受数字
语法：< input type=“number”/>
属性：min：当前域能接受的最小值
max：当前域能接受的最大值
step：决定了域所接受值递增或递减的步长，默认为1

范围类型

功能描述：允许用户选择一个范围内的值
语法：< input type=“range” min=“0” max=“100” value=“80”/>
属性：min：范围的下限值
max：范围的上限值
step：声明该值递增或递减的步长
value：设置初始值

日期类型

功能描述：创建一个日期输入域
语法：< input type=“date” />

周类型

功能描述：与date类型相似，但只能选择周
语法：< input type=“week” />

月份类型

功能描述：与date类型相似，但只能选择月份
语法：< input type=“month” />

HTML5新增属性

placeholder

作用：默认提示
语法：< input type=“text” placeholder=“请输入用户名”/>

multiple

作用：支持在一个域中输入多个值，逗号隔开，一般配合邮箱和URL使用
语法：< input type=“email” multiple/>

autofocus

作用：自动获取焦点（打开网页后就进入某项输入里面）
语法：< input type=“text” autofocus/>

required

作用：防止域为空提交表单时
语法：< input type=“text” required/>

minlength和 maxlength

作用：定制元素允许的最小字符数和最大字符数
语法：< input type=“text” minlength=“6” maxlength=“18”/>

min和max

作用：定制元素允许的最小数字和最大数字
语法：< input type=“number” min=”0” max=”100”/>

示例：

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>一个表单</title>
</head>
<body>

<form action="http://www.baidu.com" method="post" enctype="multipart/form-data">
    <p>&emsp;&emsp;&emsp;&emsp;姓名：<input type="text" name="name"/></p>
    <p>&emsp;&emsp;&emsp;&emsp;密码：<input type="text" minlength="6" maxlength="16"/></p>
    <p>&emsp;&emsp;确认密码：<input type="text" minlength="6" maxlength="16"/></p>
    密码提示问题：
    <select >
        <option value="0">请选择</option>
        <option value="1">你小学同学名字</option>
        <option value="2">你最爱的食物</option>
        <option value="3">你喜欢的人</option>
    </select>
    <p>密码提示答案：<input type="text"/></p>
    <p>&emsp;&emsp;&emsp;&emsp;性别：<input type="radio" checked/>男 <input type="radio"/>女</p>
    <p>&emsp;&emsp;&emsp;&emsp;年龄：<input type="number" min="12" max="99"/></p>
    <p>
        &emsp;&emsp;&emsp;&emsp;籍贯
        <select>
        <option >北京</option>
        <option >上海</option>
        <option >天津</option>
        <option >江西</option>
    </select>
        省/直辖市
        <select>
            <option >南昌</option>
            <option >景德镇</option>
            <option >赣州</option>
            <option >抚州</option>
        </select>市
    </p>
    <p>&emsp;&emsp;&emsp;&emsp;爱好：<input type="checkbox" checked/>上网 <input type="checkbox"/>体育<input type="checkbox"/>学习</p>
    <p> &emsp;&emsp;个人介绍:<textarea name="" id="" cols="30" rows="10"></textarea></p>
    <p>&emsp;&emsp;上传头像：<input type="file"/></p>
    <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<input type="submit"/> &nbsp; <input type="reset"/></p>

</form>
</body>
</html>

HTML5新增元素

HTML5新增语义化标签

1.header 页面头部
2.footer 页脚
3.article 定义页面独立的内容区域
4.aside 定义页面的侧边栏内容
5.details 文档某个部分的细节
6.summary 是details中的标题
7.figure 规定独立的流内容
8.figcaption 是figure的标题
9.mark 标记
10.nav 导航链接
11.meter用来表示范围已知且可度量的内容。
12.ruby加注释

HTML5新增的结构标签

<header>...</header>     头部

<nav>...</nav>	导航

<section>...</section>定义文档中的节。比如章节、页眉、页脚或文档中的其它部分 

<aside>...</aside>      侧边栏

<footer>...</footer>	页脚

<article>...</article>代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等

<figure></figure>	用于对元素进行组合。多用于图片与图片描述组合
		<figure>
			<img src="img.gif" alt="figure标签"  title="figure标签" />
			<figcaption>figure的标题</figcaption>
		</figure>
		
<details> 标签用于描述文档或文档某个部分的细节
		IE不支持 <details> 标签
		<details>
			<summary>details中的标题</summary>
			<p>详细的内容</p>
		</details>
		
<mark>  </mark>
	定义带有记号的文本，它会给你要突出显示的文本下加个背景色。
	如：<p>你是<mark>大长腿</mark>吗？</p>
	
<meter> </meter>标签
		<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。
				<meter min="0" max="100" value="80"></meter>
				low:最低临界点
				high：最高临界点
				<meter min="0" max="100" value="81" low="20" high="80"></meter>
				
<progress></progress>标签
		<progress> 标签定义运行中的进度（进程）
		<progress max="100" value="20"></progress>
		max：定义完成值
		value：定义当前值

<datalist></datalist>标签
		<datalist> 标签定义选项列表,与 input 元素配合使用该元素，来定义 input 可能的值
		datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
		请使用 input 元素的 list 属性来绑定 datalist。
		<input id="myCar" list="cars" />
		<datalist id="cars">
		  	<option value="BMW">
		  	<option value="Ford">
		  	<option value="Volvo">
		</datalist>
		
<video> </video>标签
		<video> 标签定义视频，比如电影片段或其他视频流
		<video src="movie.mp4" controls>
				您的浏览器不支持 video 标签。
		</video>

在这里插入图片描述

<audio></audio>标签
		<audio> 标签定义声音，比如音乐或其他音频流
		<audio src="someaudio.mp3">
				您的浏览器不支持 audio 标签。
		</audio>

在这里插入图片描述

<source></source> 标签
		<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
		<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
		<audio controls>
		   	<source src="horse.ogg" >
		   	<source src="horse.mp3" >
		 		Your browser does not support the audio element.
		</audio> 
		
<embed/>标签
		<embed> 标签定义嵌入的内容，比如插件，当然也可以用来嵌入声音
		<embed> 标签必须有 src 属性
		<embed src="helloworld.mp4" />


<canvas> </canvas> 标签
		canvas只是个容器，你可以通过控制坐标在canvas上绘制图形。一般配合js使用能实现非常复杂的动画效果
		
		    <canvas id="myCanvas">你的浏览器不支持canvas标签</canvas>
		    <script type="text/javascript">
		        var canvas=document.getElementById('myCanvas');
		        var ctx=canvas.getContext('2d');
		        ctx.fillStyle='#FF0000';
		        ctx.fillRect(0,0,80,100);
		    </script>