HTML表单标签和HTML5新标签

最新推荐文章于 2024-09-16 19:48:09 发布

Zz一半

最新推荐文章于 2024-09-16 19:48:09 发布

阅读量503

点赞数

本文链接：https://blog.csdn.net/ZzStant/article/details/101023211

版权

本文详细介绍了HTML表单的各种控件，包括input、label、textarea、select等，以及HTML5新增的标签和属性，如header、nav、footer、article、section等，同时还探讨了多媒体标签audio和video的使用。

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

[HTML表单标签和HTML5新标签]

1. HTML表单标签

现实中的表单，类似我们填的单子。目的是为了收集用户信息。在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时也需要表单。在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。
　　表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
　　提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
　　表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

1.1input 控件

在上面的语法中，标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，标签还可以定义很多其他的属性，其常用属性如下表所示。
在这里插入图片描述

1.2.label标签

label 标签为 input 元素定义标注（标签）。
作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点如何绑定元素呢？
for 属性规定 label 与哪个表单元素绑定。

<label for="male">Male</label>

1.3.textarea控件

如果需要输入大量的信息，就需要用到标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数"> 文本内容 </textarea>

1.4.下拉菜单

使用select控件定义下拉菜单的基本语法格式如下

<select> 
<option>选项1</option>
<option>选项2</option>
<option>选项3</option> 
... 
</select>

注意：

<select></select>中至少应包含一对<option></option>。
在option 中定义selected =" selected "时，当前项即为默认选中项。

1.5.表单域

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件 </form>

常用属性：

Action
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数
据的服务器程序的url地址。
method
用于设置表单数据的提交方式，其取值为get或post。 3. name
用于指定表单的名称，以区分同一个页面中的多个表单。

2.HTML5新标签

2.1.文档类型设定

document
HTML: sublime 输入 html:4s
XHTML: sublime 输入 html:xt
HTML5 sublime 输入 html:5

2.2.常用新标签

header：定义文档的页眉头部
nav：定义导航链接的部分
footer：定义文档或节的页脚底部
article：定义文章。
section：定义文档中的节（section、区段）
aside：定义其所处内容之外的内容侧边

<header> 语义 :定义页面的头部 页眉</header> 
<nav> 语义 :定义导航栏 </nav> 
<footer> 语义: 定义 页面底部 页脚</footer> 
<article> 语义: 定义文章</article> 
<section> 语义： 定义区域</section>
 <aside> 语义： 定义其所处内容之外的内容 侧边</aside>

datalist 标签定义选项列表。请与 input 元素配合使用该元素

<input type="text" value="输入明星" list="star"/>
<!-- input里面用 list --> <datalist id="star">
<!-- datalist 里面用 id 来实现和 input 链接 -->
<option>刘德华</option> 
<option>刘若英</option> 
<option>刘晓庆</option>
<option>郭富城</option>
<option>张学友</option> 
<option>郭郭</option> 
</datalist>

fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用

<fieldset> 
         <legend>用户登录</legend> 标题
         用户名: <input type="text"><br /> <br />
         密 码: <input type="password"> 
 </fieldset>

2.3.常用的input type属性值

在这里插入图片描述

2.4.常用新属性

在这里插入图片描述

2.5.多媒体标签

audio：播放音频
video：播放视频

2.5.1.多媒体 audio

HTML5通过

<body> 
<!--<audio src="bgsound.mp3" autoplay="autoplay" controls loop="-1"/></audio> -->
为了浏览器兼容， 我们需要做三种声音文件 ogg mp3 wav 
<audio controls autoplay> <source src="bgsound.mp3" />
<source src="music.ogg" /> 
您的浏览器不支持播放声音
</audio>
</body>

autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放 loop = 2 就是循环2次 loop 或者 loop = “-1” 无限循环

2.5.2.多媒体 video

HTML5通过
同音频播放一样

  <!-- <video src="mp4.mp4" autoplay controls></video> --> 
  我们的视频支持 ogg mp4 webM 三种视频格式
  <video controls autoplay> 
  <source src="mp4.mp4"/> 
  <source src="movie04.ogg"/> 
  您的浏览器不支持视频播放 
  </video>

同样，通过附加属性可以更友好的控制视频的播放
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度