html怎么调整表单位置

哈喽，大家好，我是二毛，今天和大家分享的内容是 html 当中的表单，那目前我们看到的这个月薪结果就是我们啊表单当中用到的内容 打在这里呢，我们可以去输入，然后姓名密码，然后可以去选择性别以及它的颜色， 然后这里有不同的按钮，然后也可以上传文件，可以去简介自己，然后以下边还可以选择不同的内容。 那接下来呢，我们就来呃说一下这个表单是如何实现的，正如我们所见，这个表单呢，他经常会出现在页面的注册，登录或者是评论等，那一个页面 通常会有多个表单，所以呢我们会用这个内幕来做这个名称，区分每个不同的表单，那这里边呢，我给他起了个名字，就叫 mifom， 这个 fom 呢就是这个表单的标签， 然后麦色的，麦色的是它的提交方式，那提交方式有两种，一个是 get， 一个是 pose， 这个 get 呢它的安全性较差，所以这里边呢，我们就用的是 pose 这个 action action 呢，他是指这个数据会提交到哪一个地址去处理，所以我这个地方写的还是这个图片点 html， 然后再往下是这个他给的，他给的之前呃和大家分享过，他是页面的打开方式，那这里呢，我们啊用的是这个 plug， 然后最后一个，这个最后一个呢是指的是 表单数据提交的编码方式，那接下来呢，我们来啊分享一下这个 input 标签，这个 input 标签它分为单行文本框，那比如现在我们看到了这个姓名，请输入名字，那它就是一个呃单行文本框， 所以呢这个地方会用一个 app 等于 test， 然后后边的这个 y 六请输名字就是他的默认值，然后 size 是他的大小，设置了你的这个框的大小，然后边这个 maxlands 是你最多能够输入的字符，那现在呢？ 我把这个删掉，然后我们输入一个张三，然后可以，哈哈哈， 那你看，哈哈哈，是三个，但是他只能输入四个字符，所以第五个是输入不进去的，这个是啊，要分享的这个单行文本框，那再往下呢，大家会看到这个密码， 这是个密码文本框，也是通过这个 tap， 然后等于呃 password， 它就会变成这个 这个密码文本框，然后 y 六同样是代表的是他的这个默认值，也就是这个请输入密码， 然后接下来呢，因为他是一个加密的，我们会看不到，那他的长度依然设置为二十，然后后边呢，他是六个字符，最多可以输入六个，那如果我们输入多个的话，他也是输入不进去的，那接着再往下是一个 呃单选框，单选框这里呢它会呃 type， 就是 radio， 然后 这个内幕呢，它是一个分组，然后 value 呢？是它的呃单选按钮的取值，这两个呃它都是必选的属性，然后这个 check， 它就是呃默认的选择。就比如现在我们去刷新这个页面的时候， 他就是默认选的是这个难，然后所以这个地方我们也可以这样选，他只能是个单选，但是默认的话是难。 接着再往下是一个复选框，复选框它就是 tap， 等于 check box， 然后同样是内幕，然后和 value， 然后把这个 check 写在哪，他就会默认选择的是哪，然后这个就是可以呃多选的， 然后再下边呢就是这个按钮，按钮也分为这样的几种，一个是普通按钮，这个普通按钮呢就是配合这个 gs 进行各种操作的，就是我目前看到的这个按钮， 如果去点一下，他会有一个这个点击的效果，那提交按钮呢？他通常是给这个啊服务器去提交数据的，那比如点一下这个提交按钮，他就会把这个数据提交到这个呃图片的 html 当中， 然后下边呢还有一个重置按钮，就是这个 reset， 这是重置按钮，然后最下边呢还有一个，这个就不是呃音谱的类型的了，它就是一个 button 在这，然后接着再往下呢就是这个啊文上传文件，上传文件也是改一下这个 type 值，改成 fail， 然后就看到了我们目前的这个样子， 然后再往下是多行文本框，多行文本框的话他是 taxer， 那这个 cos 他设置的是呃列数， rose 呢，是设置的行数，然后在这个地方右下角是可以这样拉动的， 可以在这里面进行啊打字。接着再往下呢是下拉列表，下拉列表呢，我们在左边可以先看到一个他是 css， 它这个下拉列表是 select， 然后里边配合的是这个 option， option 呢，里边如果在这个里面写了一个 selected， 他也是一个默认选择，就比如我们看到第一个这个下拉列表，他就默认选择的是 css， 然后我们点开之后就可以进行选择， 那如果我们想多选的话，那就会啊使用到这个这个属性，那这个属性呢？比如我们现在看到的第二个就是 html css， 还有 gs jq， 那他也是用赛子设置了一下他的大小，然后配合到呃， ctrl， 然后就可以 多选，那这是它的呃这个下拉列表。 那以上就是二毛今天和大家分享的内容，小伙伴们下期再见，拜拜。

这个叫留言吧，比如说我们的留言呢，一般会给拥护比较大的地方，对吧？那其实他叫文本玉啊，叫文本玉的这样的一个东西啊， 呃，叫 text a r e a 啊，然后那么叫文本玉，我叫留言也不太好，那我还是叫文本玉吧， 那么你通过他的名字呢，就可以看到他的地方呢，会比较大，对吧？那么这个 col 和 row 呢，其实就代表他的行和列，和我们的那个表格是一样的啊，就他的有多少行，有多少列，对吧？ 看现在的这个文本域他就很大，对吧？那我在这里边去输入的东西的可选的内容就很多，他不像我们上面的这种文本输入框或者密码输入框啊，我只能输入一点点，因为输入完了以后他就会被遮盖掉了啊，那么文本域呢，就比较适合我们大段的东西去进行输入啊。 好，所以我在这里边呢再加一个 b r 啊，然后咱们看一下，这样的话效果会更好一些，对吧？好的， 好，那么接下来呢，我们再来把这个一个城市的，那么其实他叫下拉框啊，下拉框，那么当然了，我们可以在那个三级联动上用上这个东西啊。那我们先来给大家演示一下，就是 select 啊，配合我们的一个 optation 啊，来实现这个效果。 呃，那我在这里边这个对齐，那我这样对齐一下也不太好看，对吧？但是还是可以吧，就这样吧， 那么 obtain 呢，表示的是他的下拉像啊，这个 value 我们可以先不要啊，一会我们来给大家讲，比如说我们可以有北京啊，然后上海深圳，对吧？北上广深嘛，大城市对吧？ 上海啊，广州，深圳。那么除了这个大城市以外，大家还知道有什么大城市吗？啊，除了北京，上海，广州，深圳。那有同学说啊，老师，杭州，苏州等等各种城市，其实另外一个是铁岭对吧？ 好，我们把这边加一个铁岭啊，铁岭为什么是大城市？我想懂的同学呢？就懂了啊，大家应该看到过春晚的小品是吧？好，那么这边呢，我们把它加进来了以后呢，接下来我们刷新一下啊，那这样的话就有一个下拉框，我们可以去选择啊 啊，这就是下拉框对吧，然后同样的话，我们还是在这边加一个 b r 的换行啊，那如果还不知道的话，那么大家可以搜一下鸭蛋是吧？好的， 那么这里 ok 了以后呢，那么接下来的话，我们这个基础的一些东西可以说给大家就讲完了，包含了我们的，呃，文本框，密码框，复选框，单选框，然后还有这个 select operation， 对吧？还有我们的文本域都给大家说完了， 然后接下来呢，我们来聊一聊这些常用的按钮啊。好，那么常用的按钮呢，主要就是这三个，一个叫做普通按钮啊， 普通按钮的话呢，它就是一个 input tap 等于 button， 就是 b o t t o n。 然后还有一个的话呢，叫做重置按钮， 重置按钮的话呢，它是用来把我们现在用户输入的内容啊进行一次重置的，那么 input type 等于 is 一体啊， reset。 然后 接下来呢，再来一个提交按钮，提交按钮的话，就是把我们现在用户输入的所有数据提交到你已经准备好的那个后端的地址里面就可以了，那么 type 等于 submit， 嗯， 好，那么这里都有了以后呢，接下来我们就把这块来给大家刷新一下，大家看这个效果 好，我们刷新啊。啊，这边他又没有加换行，是吧？看起来有点不舒服啊，我们加一个换行，在这加一个吧。 好，大家看，那么首先普通按钮呢，因为他什么都没有加，所以他就是个按钮里面连文字都没有，但重置按钮呢，他默认是有重置两个字，提交按钮默认有提交，对吧？然后那么你看啊，我点提交是不是就来到了 index 点 p h p 啊，其实就这个就是提交数据啊，但是我没有这个文 不念，不过没关系啊，而重置的话呢，就相当于说啊，我现在输入了一些东西，对吧？然后点击重置，他就会重置了，就没了啊，就相当于说你填了以后呢，我想让你再重新填一遍，就可以用这个重置按钮了。 那普通按钮，如果我们想让这里边有文字怎么办呢？我们就可以用一个叫 y 六的属性啊，这个 y 六的属性呢，他不仅可以夹在这个按钮上面啊，他可以夹在任意的上面啊， y 六的话，我们叫做普通 就可以了。好，那么我们刷新，那你会发现这里边就有文字了，对吧？然后这个 y 六的话呢，你还可以给它放到任意的地方，比如说我放在这个 文本输入框里面，可以吗？可以的，然后而且呢，他这里面就会显示一个普通，好吧，那么这个当然也可以删掉，对吧？啊？就可以了。好，那么这块呢， 演示完了以后呢，接下来我们既然说到这个属性，我们就把属性呢给大家都讲了，呃，最常用的属性呢是这个叫 place holder 啊，就是请输入您的用户名或密码，对吧？那么请输入您的用户名， 然后他的话呢，就是给用户的一种提示信息啊，当我们的鼠标点进来以后呢啊，你就可以输入了，然后默认的他的那个内容呢，就没了，当你都删除掉以后呢，他就又显示出来了，而且这个东西在密码里面也是可以非常好的去应用的啊，就是 plays holder。 好，那么如果说我现在接下来，呃，不让用户点击按钮的话，我们可以加一个叫做 reader only 的属性啊，加入 reader only， 那么这个时候呢，我们的这个普通按钮啊，大家看你就不能点了，明白吧？他就是属于一个什么叫 只读，就是只可以读的状态，呃，或者说我给他放到这个，嗯，密码输入框里边，大家可能看起来更效果更明显啊， 好，我们刷新啊，然后大家看，这个时候呢，你是不能够往这个密码输入框里面再输入内容的，大家看到了吧， 就我已经选中他了，对吧？其实我在输入啊，但是我输入不进去，这就叫指读啊，然后那么按钮呢，其实我们更更好用的叫做 dc book 啊，因为刚才呢，我们 redoned 的时候他还可以点，对吧？但 dc book 了以后，你会发现你连点都不能点了，看到了吗？ 这不能点了，他已经不给你点的权力了，这个可以点，对吧？但这个不能点。好，那么如果这里是 red n 力的话，比如说我们这个重置按钮啊，我给他写一个 red n 力啊，叫做指读，指读的话你还是可以 点的，但 dc 不就相当于军用掉了，你连点都不可以点。好的，那么这个就是我们的一些常用的属性啊， dc 不，瑞登里，还有我们的 plays holder， 还有我们的一个 y 六，那么除了这些常用的一些属性以外呢，那我们在这个页面当中吧，还有一些这个，比如说像 呃最大输入长度啊，还有一些呃隐藏的东西啊，其实也有，对吧？但这里边的话呢，就不是特别的重要了啊，大家了解一下就可以。然后后边呢，随着我们再往后学习，也会给大家再讲到， 然后接下来呢，还有一个比较重要的点，然后需要给大家再讲一下，就是说我们的这个提交的 get 和 post 的一个区别，需要跟大家说一下，那我们在这里边呢，给大家加入一个叫内蒙的属性，大家注意看啊，这里又有一个内蒙，内蒙呢叫 user， 相当于说呢，就是用户提交的这个名字，那么 password 的密码的瑞登里我就给他删掉了，那么这里边的内幕我们叫做它 pass。 好，那么一个 user， 一个 pass， 这时候呢，我们是 get 的提交方式，那我输入用户名叫做张三， 然后密码呢，我们是一二三四五六啊，啊，这边 reno 六没刷新啊，刷一下啊， 叫张三，密码的话一二三四五六。好，那么当我们点击提交之后，大家注意看这个地址栏这里啊，他会携带数据， u 字就叫张三， pass， 就是一二三四五六。 呃，这种的话就是我们 get 提交方式的特点，叫地址栏铭文传餐，好吧，地址栏铭文传餐啊，这就是 get 的提交方式的特点，然后还有一种的话呢， 就是我们的 post 啊，啊，其实 post 也能找到啊，那我们再来给大家演示，那不要忘了刷新对吧？张三密码呢？一二三四五六， 好，其实一样的啊，那么我们还是点提交就可以了，提交完了以后呢，大家打开我们的右击检查 啊，然后来到这个奈特沃克里边啊，他会有一个这个叫 index 点 p h p 丢失了，但这个没关系，我们本来就没有，然后我们需要来到他的 payload 里边，大家会发现这里边还是携带了什么柚子，张三 pass， 一二三四五六就是他的 freeram data， 呃，相对来说呢，我们的 from data 它携带的数据量会大一些，然后毕竟它是通过表单的数据进行传输的，就是 form data 嘛，表单数据。而我们上一个 get 呢，它是地址栏铭文传餐，因为地址栏它的长度是有限的，所以说 他携带的数据量呢，也是有限的啊，这个就是 get 和 pose 的一个区别，大家也需要了解一下。呃，随着后边我们的学习呢，还会给大家再更加详细的讲到这个 get 和 pose 的区别，因为它也是一个面试的经常问的地方， 但是目前来说呢，大家记住我的给大家讲的 get 是铭文地址栏传仓， post 呢，是在啊 from data 里边的数据发送过去的，然后它的安全性相对来说高一些，这个就够了啊。 好的，那么本节课呢，我们关于这个 h t m l 的表单标签就给大家讲解完了，主要包含了我们的表单介绍和表单的语法，那么同学们加油！

在提交网页表单时，前端和后端如何配合处理表单？一分钟内我给你演示。 这里有两个网页文档， index html 是表单页，也就是所谓的前端。 welcome php 是表单信息处理业，也就是所谓的后端。看看表单页代码， 这是一个输入框，代码名称为 user。 当用户填写完表单并点击提交按钮时，表单的数据会被送往 welcome php， 传送方式为 post。 再看看表单处理页， 这是一行输出代码， echo 是输出命令，输出什么呢？就是 post 方式传递过来的，名称为 user 的输入矿的值。那我们试试吧。 当处理 html 表单时，后端能把来自 html 页面中的表单元素变成可供后端脚本使用。 java， python 也一样，你也赶快去试试吧！

这样的网页表单怎么做？只需两分钟，我来教你。表单代码在 form 标签中间写，这是一个单行文本框，代码 type 是属性的意思，属性是 text。 再做一个密码输入框，同样的代码属性改为 password， 输入时可以把密码隐藏起来。再做单选按钮， 同样的代码属性改为 radio， 只能选一个复选框， 还是同样的代码属性改为 checkbox， 可以多选 做一个多行文本框。 rose 是高度， coast 是宽度。 texturia 标签中间写，可以输入多行文本。 下拉框 select 标签中间写， 下面做一个提交按钮，同样的 input 标签属性是 submit value 直视提交。 最后做一个重置按钮，同样的 input 标签属性改为 reset， 这个按钮可以清除表单里的所有内容。

我在网页上录入了一些内容，当我想删除这些重新录入的时候，只需要点击一下清空按钮，我录入的信息就都删除了。这种场景大家有用过吗？今天跟大家分享一下在 html 中清空操作的实现。 咱们沿用上期的放物表单，我们在这里增加一个 epot， 然后将太伏设置成 reset， 将 view 设置成重置就可以了。我们预览一下页面， 先录入一些信息，然后点击重置，页面上的内容就清空了，这是一个比较简单的操作，这里有一点需要补充说一下，这个 reset 只是重置他所在表单的内容，我们在放母外部添加一个输入框测试一下， 我们点开页面，然后录入上信息，在这个测试框里也写入信息，然后点击同志，这里可以看到我们新增的输入框内容，没有 为清除，所以这里大家注意一下，这个 resit 只针对他所在表单录入的内容，并且他只有在表单内部才有作用，这是 resit 的功能。昨天我们讲父母表单提交数据的功能，在后台有粉丝咨询怎么设置提交的数据，我们基于昨天的 form 知识点说一下， 看过我们昨天视频的朋友们已经知道了，刚点击表单里面的三倍测会提交数据，但是怎么设置提交的数据呢？我们先演示一下这里我们现在想提交的数据，输入框中增加一个内幕属性， 再回到页面上注入内容后点击提交。大家看一下地址栏是不是很眼熟，这里其实就是刚才我们在页面上填的表单数据，他已经给我们传过来了，传到这里应该怎么办呢？这是后端开发的事情了，他们会 先拿到这些数据，然后去处理一些事情，我们需要做的就是先把数据传过来，如果我们没有录入这个内幕，我们可以看一下结果，我们对比一下有内幕和没有设置内幕的结果， 可以看到没有内容的时候，上面只有一个问号，没有后面的参数。总结一下，当我们想重置这个表单内容的时候，我们可以设置一个音菩萨，将它的太湖属性设置成 reset 就可以了，那我们点击这个按钮就可以清空这个表单的内容了。这个重置按钮的使用场景也是比较多的，当一些简单的表单页面的时候，我们可以重新刷新就没有数据了。 但是当遇到一些抢购页面的时候，当我们录入了一些信息，如果此时我们去刷新重新录入内容的时候，可能因为抢购的人比较多，会导致进不来这个页面，所以此时重置按钮的功能是效率比较高的。动物表单是 可以提交数据的，当我们想提交某个输入框的数据的时候，可以在这个输入框上增加内幕属性，然后带有内幕属性的输入框的值就会被提交到后端。