a标签提交form表单_HTML5新标签(全)

最新推荐文章于 2021-06-27 01:49:44 发布
最新推荐文章于 2021-06-27 01:49:44 发布
阅读量549 收藏 1
点赞数
文章标签： a标签提交form表单 css3新特性 html5+css3第一次作业 html5多个图片位置 html5标签属性大全 html5网页设计作业

910826d2472b544bc614d86e79669f4c.png

HTML5简介

HTML5是HTML最新的修订版版，2014年10月由W3C完成标准制定。它的设计的目的是为了在移动设备上支持多媒体。并且HTML5简单易学。

4dd98d772d1895eb471ac43a71ae617b.png

什么是HTML5

HTML5是下一代标准。HTML4.01的上个版本诞生于1999年,HTML5目前为止仍然处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5支持

HTML5有趣的新特性

  • 用于媒介回放的video和audio元素
  • 新的特殊内容元素：比如article,footer,header,nav,section
  • 新的表单控件：比如calendar、date、time、email、url、search
  • 2D/3D绘图&效果
  • 支持对本地离线存储

HTML5的文档声明

声明必须位于 HTML5 文档中的第一行,使用非常简单:

<!DOCTYPE html>

之前我们所编写的网页其实都是HTML5的文档，为了向后兼容。如果我们编写HTML4的文档声明，那么就可能不会兼容HTML5的新的标签支持。

HTML5浏览器支持

最新版本的五个主流浏览器都支持某些HTML5特性，IE9以上浏览器支持HTML5新特性。但是IE8以下的浏览器不支持

IE8以下(包含IE8)以下版本浏览器兼容HTML5的方法，我们必须使用htmlshiv垫片包，让其支持HTML5新特性

<!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><![endif]-->

HTML5新标签

8个新语义元素和新属性

header,section,footer,aside,nav,main,article,figure所有的这些元素都是块级元素

所有的标签都支持HTML5新属性

618e31043e01f5c12597953de99fef78.png

1.nav标签

<nav> 标签定义导航链接的部分。

并不是所有的 HTML 文档都要使用到<nav>元素。<nav>元素只是作为标注一个导航链接的区域。

比如之前HTML4中我们定义导航的时候通常都这样写

<div class="nav">    
  <a href="#">python</a>    
  <a href="#">linux</a>    
  <a href="#">web前端</a>    
  <a href="#">Java</a>    
  <a href="#">Go</a><
  /div>

通过HTML5的nav标签我们可以这样表示：

<nav>    
  <a href="#">python</a>    
  <a href="#">linux</a>   
  <a href="#">web前端</a>    
  <a href="#">Java</a>    
  <a href="#">Go</a>
</nav>

b1eaf9cb956b3681b815c8c627451c20.png

2.header标签

header标签定义文档的头部区域，它是作为网页的头部介绍内容或者是导航链接栏的容器。在一个文档中，你可以定义多个header元素

注意：header标签不能被放在 footer、 address或者另一个 header元素内部

ef84ce3d2ebf8a56d0e2642a95f83673.png

3.main标签

标签规定文档的主要内容。一个文档中只有一个main元素。

0c13e03620f89b216209be90cb2adc26.png

你会发现，把整个文档作为了主要内容。

4.aside标签

aside标签定义article标签外的内容。aside的内容应该与附近的内容相关

比如像稀土掘金网站上

1e99766f68150ffa49cd6ea64dbadf0b.png

5.section标签

section标签定义了文档的某个区域。比如章节、头部、顶部或者文档的其他区域

<section>
    <h2>小猿圈重大新闻</h2>
    <p>
        本阶段讲解HTML5+CSS3部分，下个阶段老师开始做直播课。欢迎大家光临。小猿圈上的视频全部免费
    </p>
</section>

比如这个网站aside侧边栏中定制了三个section

afbe4e0c5c2921b017c2ab60b4695c10.png

6.article标签

定义页面独立的内容。必须是独立于文档的其余部分。

article通常都应用在：

  • 论坛帖子
  • 博客文档
  • 新闻故事
  • 评论

7.figure标签

figure标签规定独立的流内容(图像、图标、照片、代码等)

figure元素的内容应该与主内容有关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响

<figure>
  <img src="flower.jpg" alt="My 女神" width="304" height="228">
  <figcaption>我的女神照</figcaption>
</figure>

8.footer标签

定义文档或者文档一部分区域的页脚。该元素会包含文档闯作业的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中，可以定义多个footer。

比如小猿圈的底部就是用footer

b49de64b2ac1f5d04c811ad3653a8fbe.png

其它的新语义化标签

mark

高亮文本标签

<p>
	元素用于<mark>高亮</mark> 文本
</p>

progress

用来显示一项任务的完成进度。

属性：

  • max 最大值
  • value 当前进度
<progress value="70" max="100">70 %</progress>

address

个人或者某个组织的联系信息等等

<address>
  <a href="mailto:jim@rock.com">mjj67890@163.com</a><br>
  <a href="tel:+13115552368">(311) 555-2368</a>
</address>

以上标签都是我们在网页中常见到的。还有很少可以在网页中见到的HTML5新标签。在这里我就不一一赘述了。大家可以参考这个链接去查阅相关资料：新标签

新的表单特性

HTML5新增了新的表单元素

  • datalist
  • keygen
  • output

datalist

该元素规定输入域的选项列表。规定了form或input应该拥有自动完成功能，都能够用户在自动完成域中开始输入是，浏览器应该在该域中显示填写的选项：

<form action="">
    <input type="text" list="class">
    <datalist id="class">
        <option value="hello world"></option>
        <option value="hello web"></option>
        <option value="hello Go"></option>
        <option value="hello python"></option>
    </datalist>
    <input type='submit'/>
</form>
注意：input中的list跟datalist中的id必须关联。

kegen(了解)

是提供一种验证用户的可靠方法，当提交表达时，会生成两个键，一个是私钥，一个是公钥。

私钥存储于客户端，公钥则被发送给服务器。公钥可用于之后验证用户的客户端证书

<form action="hello.asp" method="get">
  用户名: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
</form>

output

用于不同类型的输出，比如计算或脚本输出

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100 +
  <input type="number" id="b" value="50">=
  <output name="x" for="a b"></output>
</form>

HTML5新的表单属性

form新属性

autocomplete属性

此属性规定form或input应该拥有自动完成功能

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项

<form action="" autocomplete="on">
    用户名: <input type="text" name="usr_name" >
    <input type="submit">
</form>

当刷新网页，再次输入内容，查看效果

novalidate属性

是一个布尔值，当为true时，表示规定在提交表单时，不应该验证form或input域

如果给input的type改成email。则我们在输入邮箱时通常自动验证。如图所示

77afed7b225fe3e9533b866b945941ae.png

如果将form设置此属性，则可以直接提交。

<form action="" autocomplete="on" novalidate="">
    用户名: <input type="text" name="usr_name" >
    email: <input type="email">
    <input type="submit">
</form>

input新属性

autofocus属性

在页面加载时，是否自动获得焦点

用户名: <input type="text" name="usr_name" autofocus />

c71571b00fcb824be2a40a156152d4ba.png

formaction属性

该属性用于描述表单提交的URL地址。会覆盖form元素中的action属性。该属性用于type='submit'。

<form action="" autocomplete="on" novalidate="">
    用户名: <input type="text" name="usr_name" autofocus>
    email: <input type="email">
    <input type="submit" value='提交到当前服务器'>
    <input type="submit" formaction="http://www.baidu.com" value='提交到百度服务器'>
</form>

formenctype属性

该属性描述了表单提交到服务器的数据编码(只对form表单中 method=’post‘表单)

第一个提交按钮已默认编码发送表单数据，第二个提交按钮以 “multipart/form-data” 编码格式发送表单数据:

<form action="" autocomplete="on" novalidate="" method='post'>
    用户名: <input type="text" name="usr_name" autofocus>
    email: <input type="email">
    <input type="submit" value='提交到当前服务器'>
    <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
</form>

formmethod属性

formmethod 属性定义了表单提交的方式。

formmethod 属性覆盖了 <form>元素的 method 属性。

注意: 该属性可以与 type=”submit” 和 type=”image” 配合使用。

<form action="" autocomplete="on" novalidate="" method='get'>
    用户名: <input type="text" name="usr_name" autofocus>
    email: <input type="email">
    <input type="submit" value='get提交'>
    <input type="submit" method= 'post' formenctype="multipart/form-data" value="post提交">
</form>

formnovalidate属性

novalidate 属性是一个 boolean 属性.

novalidate属性描述了 <input> 元素在表单提交时无需被验证

formnovalidate 属性会覆盖 <form> 元素的novalidate属性.

注意: formnovalidate 属性与type=”submit一起使用

<form action="">
    E-mail: <input type="email" name="userid">
    <input type="submit" value="提交">
    <input type="submit" formnovalidate value="不验证提交">
</form>

formtarget属性

formtarget属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。

<form action="">
    用户名: <input type="text">
    密码: <input type="password">
    <input type="submit" formtarget="_blank" value="提交到一个新的页面上"> 
</form>

height和width属性

定义一个图像提交按钮，使用width和height属性

<input type="image" src="img_submit.gif" width="30" height="30">
花房菇凉：关于前端学习路线的一些建议（内含经典自测题）​zhuanlan.zhihu.com
43800e02df42bd5ee67bda4d0f9eea73.png
作者：前端开发小马哥
链接： https:// juejin.im/post/68918861 27288942606
来源：掘金
weixin_39612499
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML的form表单标签用法学习教程
12-13
表单实际上是包含表单元素的区域，在这个区域中的各种元素的输入信息最终都将通过表单提交到程序脚本中。例如常见的有用户登录、注册、发布文章等等，都是通过表单提交到动态程序进行处理的。本节主要讲述表单和表单...
HTML的表单form以及form内部标签的使用
09-28
在HTML中，`<form>`标签是用来创建表单的基本元素。`<form>`标签具有两个关键属性：`action`和`method`。`action`属性指定表单数据的提交目的地，即服务器上的处理脚本或页面的URL。`method`属性定义了数据提交的...
a标签提交form表单_HTML表单元素及其属性
weixin_39584529的博客
11-20 371
表单区域元素表单区域使用<form>标签包裹，表单区域中可添加多种表单元素，包括input元素、textarea元素、select元素、button元素和label元素等，需要注意<input>为单标签元素。<表单区域元素常用属性：action：处理器表单提交的URL，规定提交表单向何处发送表单数据。method：浏览器使用这种HTTP方式来提交表单，可能的值有pos...
a标签提交表单
丿灬安之若死
02-24 464
&lt;form action="todo.php" method="post" id="form_add_todo" name="form_add_todo"&gt; &lt;input type="checkbox" value="&lt;?php echo $value['completed'] == 1 ? 't
form表单使用a标签提交
weixin_40403318的博客
05-08 3137
用a标签post提交表单 <form name='/test/' method='post' id="loginForm"> <input type='text' name='name' value='姓名'/> <input type='text' name='年龄' value='年龄'/> <!-- 这里的document：后面要写form的i...
a标签提交form表单_HTML基础知识之表单
weixin_40005542的博客
11-26 1159
表单的用途非常广泛，比如电子邮箱、用户注册登录、网上搜索等，简单来说，表单是一个将用户信息阻止起来的容器；一、表单标签及属性<form>标签就是表单标签，该标签用于在网页中创建表单区域，属于一个容器标签；action：表单的属性之一，用于指示服务器上处理表单输出的程序；method：表单属性之一，此属性告诉浏览器如何将数据发送给服务起，指定向服务器发送数据的方法，是用post或者get...
Submit-the-form.rar_form 提交_提交表单
最新发布
09-22
在HTML表单中，我们可以通过`<form>`标签来创建表单，设置`action`属性指定提交表单的处理页面（这里是ASP脚本），`method`属性则定义了数据发送的方式，通常是"GET"或"POST"。表单内包含各种表单元素，如文本框、...
contact-form-css-template.zip_PURE_contact form_css_html5
09-22
HTML5的语义化标签，如`<form>`,`<input>`，`<label>`，`<button>`等，会被用来创建表单元素，同时与`form.css`中的样式结合，实现视觉效果。 3. **readme.html**：通常，这是一个包含模板使用指南或说明的文件。...
html用a标签怎么提交表单？
轻锋的专栏
11-18 5005
html用a标签怎么提交表单？ 2011-03-08 10:55MeACrazy | 分类：Html/Css | 浏览10003次 如下代码请 帮忙完善 function judgeDelete() { if(confirm("确定要删除吗？")) { window.location.href="doDelete.jsp"; } }
a标签提交form表单_06 form、input和button标签详解
weixin_39828331的博客
11-28 179
form、input和button标签详解forma标签和form标签的区别： a标签跳转页面时发起的是 http get 请求。 form标签跳转页面时发起的请求方式可以通过 method 设置；注意：如果form表单里面没有提交按钮，则无法提交。 get 是获取内容；post 是上传内容。示例<inputtype:button 按钮，上面显示 value 属性的值。button在fo...
HTML：使用a标签提交form表单
热门推荐
JabinJava的博客
11-24 1万+
a标签提交form表单 如果美工给的form表单提交使用了a标签，这样就无法获取表单数据： &amp;lt;form action=&quot;/login&quot; method=&quot;post&quot;&amp;gt; &amp;lt;input name=&quot;username&quot; &amp;gt; &amp;lt;input type=&quot;password&q
html用a标签怎么提交表单
weixin_30832405的博客
12-18 117
如下代码请 帮忙完善function judgeDelete() { if(confirm("确定要删除吗？")) { window.location.href="doDelete.jsp"; } }<form action="doDelete.jsp" method="post" id="myForm"><a href="javascr...
怎么用a标签提交表单？
m0_52212192的博客
06-14 1429
怎么用a标签提交表单？ 在提交表单的时候，我们可能会常常遇到一些各种各样的困惑，比如说，在jsp里使用表单提交，用input 的话并不好看，那么有什么方法可以不用input标签呢？？？ <form action="index.jsp" method="post" id="myform"> 名字：<input type="test" name="stu_name"/> </form> <a href="#" onclick="document.getElementBy
html如何让a标签提交表单提交,html post请求之a标签的两种用法解析
weixin_34457571的博客
06-27 1031
这篇文章主要介绍了html post请求之a标签的两种用法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧html post请求之a标签的两种用法举例，具体内容如下：1、使用ajax来发起POST请求HTML代码如下：发起POST请求JQuery代码如下：$(".a_post").on("click",function(event){event....
点击a标签提交form表单
zhangqian9527的博客
10-24 6724
今天在做用户管理分页的时候碰到一个问题，将分页的按钮单独写一个页面，在显示的页面将分页的按钮include进来； 但是在点击a标签的时候，会生成两个request，仔细看代码都没有问题，后来发现，a标签在添加href=“javascript:void(0)”时，只生成一个request； 原因： 点击a标签提交表单，如果a标签没有href=“javascript:void(0)” 属
a标签提交form表单_Day51 HTML表格表单标签、flask框架
weixin_39617685的博客
11-21 270
目录表格标签表单标签action标签input标签select标签textarea标签form表单提交文件需要注意flask框架1、表格标签<!DOCTYPE html> 2、表单标签用于获取前端用户输入的数据(用户输入的、上传的、选择的)，基于网络发送给后端服务器。在该form标签内部书写的获取用户的数据都会被form标签提交1、action标签action：控制数据提交的后端路径-...
为什么很多网站的表单提交按钮都是用＜a＞标签
jinjuanyang的博客
07-03 938
之前看过一些文章，说是用a标签来代替submit按钮更好一些，因为submit按钮在IE6下会有一些兼容的问题，不好统一，而且input的行高在各浏览器参差不齐，还不能用line-height控制，在按钮有一些交互效果的时候，a标签更容易实现，hover效果便可，所以许多前端喜欢用a标签来代替input。     但是涉及到一点，input submit可以用来提交表单的值，而a标签似乎不太
a标签提交form表单_form 标签
weixin_39785814的博客
11-27 834
<form> 标签用于创建供用户输入的HTML表单。HTML表单包含表单元素，表单元素是不同类型的输入元素，它可以是：文本字段、复选框、单选按钮、复选按钮、下拉框、多行文本域以及按钮等等。<form> // 表单元素 </form>form表单用于收集用户信息，所有要提交的数据都要放在form标签中，在form表单中我们可以设置几个属性值：<for...
HTML基础教程：学习FORM标签与表单提交
"HTML基础知识，尤其是关于表单的FORM标签，是网页开发的重要组成部分。本文将深入探讨HTML的基础概念，以及如何使用FORM标签来创建表单并处理用户数据。" HTML，全称为超文本标记语言，是一种用于构建网页的标准...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值