html表单代码原理,HTML表单form

源码下载

窗口HTML结构

账号:密码:

代码解析

最外层父元素form是块元素，form表单的属性action、method、name都是关于http通信功能的属性，不影响表单form块元素的布局和外观，设计网站登录窗口视觉效果的时候，可以不写，

当然你不写，团队其他人就要补写，完整上线部署的网站肯定是要写的。form里面的子元素分为两部分，一部分元素仅仅是为了视觉效果，另一部分是为了填写要提交的数据，比如登录时输入账号和密码的文本框，

input元素是行内块元素，可以自定义文本框的尺寸，属性type的功能是定义该元素的功能和文本框中数据的用途。type的属性值是"text",得到一个文本框，可以输入字符，填写的内容会被发送到服务器。

type的属性值是"submit",从视觉上浏览器默认会产生一个按钮效果，功能上是当你使用鼠标单击该按钮的时候，浏览器会调用自己相关程序模块，把表单中文本框里面的数据发送到到服务器，这里可以看出表单标签的作用是

把input文本框和input提交按钮包裹在开始标签和结束标签之间，每一个提交按钮对应一个form表单，各自提交各自对应表单form范围内的数据。type用来表示元素功能，同时浏览器会根据type的值默认一个样式，再设计网页效果的时候，

要根据input元素用途正确添加属性值。

与通信相关的元素都会使用一个name元素标识，比如上面两个文本框不使用"account"、"password"标记，服务器收到数据后也不知道是什么数据，哪个是密码，哪个是用户名。账号文本框的属性name赋值"account"标记后，

发送数据的时候就会发送“account+用户名”，服务器就知道你发送的数据是什么数据。在设计登录窗口视觉效果的时候有没有name属性无所谓，它不影响样式，正式测试或部署网站的时候要填写。

窗口CSS样式

前面都讲过相关命令，CSS样式布局不再解释，代码中做了简单注释，照着模仿一遍即可。

.account{margin-top:50px;}

.password{margin-top:20px;}

.submit{margin-top:50px;background-color:#1abc9c;border-width:0px/*登录提交按钮外边框宽度设置为0不显示*/}

总结

HTML元素是通信功能和CSS样式共同的载体，一些属性是为了通信服务，一些属性是为了视觉效果服务。这里也可以学到一点，通过html的元素可以

为浏览器引入各种功能，比如让一个标签支持调用本地的摄像头、麦克风、显卡等硬件，比如canvas标签能够实现WebGL。这些功能的实现都依赖与浏览器程序的实现，

这就是浏览器的开发问题了，有兴趣的话可以了解浏览器的知识和开发，及时不开发浏览器，学习浏览器的基本设计原理和功能，也有助于HTML和CSS的学习，毕竟浏览器是

HTML和CSS标记语言的解释器，没有浏览的解析，这些标签和样式也不会再网页上呈现出来，也无法实现客户端与服务器的通信。

html表单代码原理,HTML表单form相关推荐

java客户端重复请求_Java后台防止客户端重复请求、提交表单实现原理
Java后台防止客户端重复请求.提交表单实现原理发布于 2021-1-8| 复制链接摘记: 这篇文章主要介绍了Java后台防止客户端重复请求.提交表单实现原理,文中通过示例代码介绍的非常详细,对大 ...
基于jQuery会员中心安全修改表单代码
基于jQuery会员中心安全修改表单代码.这是一款登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置代码.效果图如下: 在线预览源码下载实现的代码. html代码 ...
java自定义表单_JSP实现用于自动生成表单标签html代码的自定义表单标签
本文实例讲述了JSP实现用于自动生成表单标签HTML代码的自定义表单标签.分享给大家供大家参考.具体如下: 这个是自己写的一个简单的JSP表单标签,用于自动生成checkBox,select,radi ...
表单在线生成 html代码,JSP实现用于自动生成表单标签html代码的自定义表单标签...
本文实例讲述了JSP实现用于自动生成表单标签html代码的自定义表单标签.分享给大家供大家参考.具体如下: 这个是自己写的一个简单的JSP表单标签,用于自动生成checkbox,select,radi ...
elementui 嵌套表单验证_vue elementUI 表单嵌套验证的实例代码
一:表单一级验证 element中from组件内表单验证通过使用el-form标签,绑定model和rules属性进行表单验证简单的表单验证很简单,在prop内绑定验证属性,然后在rules对象内定 ...
elementui 按钮表单_仿ElementUI实现一个Form表单的实现代码
使用组件就像流水线上的工人:设计组件就像设计流水线的人,设计好了给工人使用. 一. 目标仿 ElementUI 实现一个简单的 Form 表单,主要实现以下四点: Form FormItem Inp ...
评论留言用html怎么做,利用JS实现评论留言发布表单代码
特效描述:利用JS实现评论留言发布表单代码.利用JS实现评论留言发布表单代码代码结构 1. HTML代码来,说说你在做什么,想什么... 请点击发布试试吧请填写内容后再发布! window. ...
如何创建HTML表单?html表单代码怎么写
html表单代码是什么?如何创建HTML表单?这些对于新手会感到陌生,下面我们为你总结一下html表单代码怎么写?以及html表单的创建? 一:构建表单标签在文本编辑器中打开HTML文档,必须在&l ...
html提交表单原理,HTML表单、HTTP Get与Post杂谈
HTTP的GET/POST方式有何区别?这是一个老生常谈的问题,但老生常谈的问题往往有一些让人误解的结论.本文将带您浅尝HTTP协议,在了解HTTP协议的同时将会展示许多被人们忽视的内容.在掌握了HT ...

html表单代码原理,HTML表单form

html表单代码原理,HTML表单form相关推荐

最新文章

热门文章