HTML基础之表单提交

表单提交

在网页上，一般都会有让你输入信息进行校验或者检索的地方，比如搜索栏或者输入账号密码进行登录的地方，当我们输入数据之后，单击确定或者搜索等按键的时候，网页就会把我们输入到输入框中的信息发送到与前端网页相对应的后端程序中对你的信息进行处理。
在这里我们就要使用到表单标签，来对用户数据进行提交。

<form><!-- 代码段/标签组 -->
</form>

在这个form表单中的所有标签信息，都会有将自己信息提交给后端的能力。
对于form表单，我们介绍一下属性
action 为表单所要提交的地址。一般情况下，我们自己测试的时候，可以使用后缀为php的文件来写相关的代码来处理表单提交过来的信息。
但是我们的浏览器是无法编译php文件的，所以如果大家想要测试自己编写的代码是否能成功提交，可以写一个空的php文件，然后使用相对路径给这个action属性，如果浏览器成功跳转即为成功。而如果大家想要看看一些其他的东西，那就要学习php的知识，使用php的代码来编写一个接收和处理表单信息的东西。同时我们还需要一个软件来帮助我们解析php中的代码，就是WampServer，有兴趣的同学可以试一试。

method 这个属性是表单的提交方式，分为两种POST和GET。
GET型提交是比较老版的提交方式，它把所有信息都加到跳转地址之后，例如：你要提交的地址为http://www.baidu.com,提交的信息为userName=baidu和userPassword=123，那么你跳转的地址就会变成http://www.baidu.com?userName=baidu&userPassword=123，大家可以看出，这种方式是极度不安全的，所以一般情况下我们都会使用POST的提交方式。POST的提交方式是相对安全的一种提交方式，它把所有的信息都相对保密的提交。

随后我们来介绍一些表单中常见的嵌套标签。

<input />它是一个单标记标签，这个标签我们看单词也能看得出，是用来提交信息的东西，它主要有以下几个属性值。
<input type="text" />表示一个文本输入框，可以在其中输入各种东西，字母数字标点等。

<input type="password" />表示一个密码输入框，输入的东西会自动变为星号隐藏。

<input type="checkbox" />表示一个多选框。

<input type="radio" />表示一个单选框。这里特别说一下，单选框是几个选项中只能选择其中之一，如何让浏览器知道你想让哪几个单选框是一个组合，就是将它们的name属性的值设置成一样的。例如

        <input type="radio" name="sex" value="0" checked>男<input type="radio" name="sex" value="1">女

这样在接收信息的地方，只要判断sex这个变量的值是1还是0，就能判断用户选择了哪一个。其中checked表示默认选中的意思，多选框中也可使用这个来进行默认选中。

<input type="submit" />这是一个提交的按钮，一般我们将这个东西的value属性设置为提交或者确认，比如：<input type="submit" value="提交" />或者<input type="submit" value="确认" />。这样的话，在这个按钮上写得东西就是提交或者确认。

对于input标签的value属性，value属性的值就是在页面上这个输入框或者按钮中的值，比如这样写

    <form action=""><input type="text" value="123" /></form>

那么在你打开这个页面的时候，就会是这样

浏览器会自动把value中的值放到框中。

当用户单击提交的时候，表单标签中的所有标签的状态都会被提交，提交的格式为name=value，这样键值对的方式提交。
比如在表单中这样书写

    <form action="post.php" method="GET"><input type="text" name="userName" /><input type="password" name="userPassword" /><input type="submit" value="提交"></form>

那么你跳转的位置就是

在后端接收信息的时候，userName和userPassword就是变量，123就是这些变量的值。

最后给大家一个较为完整的表单提交代码

<body><form action="post.php" method="post"><label for="username"> 用户名：</label><input type="text" name="username" id="username" placeholder="请输入用户名"><label for="password">密码：</label><input type="password" name="password" id="password" placeholder="请输入密码"><br><label>性别：</label><input type="radio" name="sex" id="" value="0" checked>男<input type="radio" name="sex" id="" value="1">女<br><label>爱好：</label>apple<input type="checkbox" name="apple" id="">orange <input type="checkbox" name="orange" id="" checked><br><input type="submit" value="提交"></form>
</body>

其页面效果如下

补充：
标签<label>这是一个标签</label>就是标签的意思。它的for属性是某一个标签的id值，意思是当单击这个label标签时，页面会自动把焦点转移到标签id为它for属性的值的标签上。即用户单击这个label标签的作用跟用户单击其相对应的标签作用是一样的。
比如用户名标签，用户单击用户名的label标签，那么input中id为username的标签就会被选中，用户可以直接在其中输入信息。

input中的placeholder属性，为提醒用户的作用，如上图中的请输入用户名一样，起到提示的作用。

<br/>表示页面中的换行。

标签属性中的id，是给前端使用的，无论是css样式还是js特效等都会通过标签的id进行操作。
而标签属性中的name，都是给后端使用的，一般情况下都是以键值对的方式作为name传到后端。

HTML基础之表单提交相关推荐

python表单提交的两种方式_Flask框架学习笔记之表单基础介绍与表单提交方式
本文实例讲述了Flask框架学习笔记之表单基础介绍与表单提交方式.分享给大家供大家参考,具体如下: 表单介绍表单是HTML页面中负责数据采集功能的部件.由表单标签,表单域和表单按钮组成.通过表单,将 ...
【前端基础】表单标签/提交
[前端基础]表单标签/提交表单标签 1. 表单的介绍 2. 表单相关标签的使用 3. 小结表单提交 1. 表单属性设置 2. 表单元素属性设置 3. 示例代码小结表单标签学习目标能够知道表 ...
ajax提交form表单数据_[基础编程学习] [PHP7数组详解]：第2章（1）从表单提交数据说起...
读完本章节内容,您能得到以下知识: 定义和使用数组创建表单,并验证表单提交的数组创建简单的数组结构操作简单数组的值遍历数组结构将表单数据存入数组存入数组之前进行数据验证 # 2.1 为什么 ...
前端基础至 form表单提交方式
原文:https://www.jianshu.com/p/8c947e7fee00 虽然前后端不分离项目越来越少了(vue等太香)但是有时候后端程序员想自己搞不分离web页面的时候还是会用原生htm ...
DEDECMS自定义表单提交后的跳转链接如何修改
这篇文章给大家分享的是有关DEDECMS自定义表单提交后的跳转链接如何修改的内容.小编觉得挺实用的,因此分享给大家做个参考.一起跟随小编过来看看吧. dedecms自定义表单,点击提交后,默认跳转到 ...
ajax form表单提交_开发日志：金数据表单自动提交脚本
最近学校要求我们每天通过一个在线表单打卡自己在家做的体育课项目,在提交的时候我突然想了下如果能有一个自动的系统每天帮我自动打卡岂不是能省很多时间?而且我一直很想学Python的网络爬虫以及服务器后端的 ...
[JSP暑假实训] 二.JSP网站创建及Servlet实现注册表单提交、计算器运算
本系列文章是作者暑假给学生进行实训分享的笔记,主要介绍MyEclipse环境下JSP网站开发,包括JAVA基础.网页布局.数据库基础.Servlet.前端后台数据库交互.DAO等知识. 本篇文章开始讲 ...
Java+MyEclipse+Tomcat (二)配置Servlet及简单实现表单提交
在Java EE应用编程中Servlet是基础,JSP是建立在Servlet基础之上的,其他Web框架如Struts.WebWork和Spring MVC都是基于Servlet的.本文主要讲述MyEc ...
自我总结和学习表单提交的几种方式 (一)
最近总是记不住表单提交的几种方式,并且各种方式的适应场景也不知道,干脆来总结一次,当再学习过程. 首先从最简单的开始练手: [1]纯form表单形式,无js和ajax ,提交路径有action决定,方 ...
文件上传 java 完美,vue+java实现文件上传（excel等），会出现跨域问题，直接用form表单提交就不会有问题了（new FormData()）...
vue+java实现文件上传(excel等),会出现跨域问题,直接用form表单提交就不会有问题了(new FormData()) 地址:https://www.cnblogs.com/muscles ...

HTML基础之表单提交

表单提交

HTML基础之表单提交相关推荐

最新文章

热门文章