html中记住表单内容,html中form表单的练法

学form表单的时候，听老师讲的晕晕乎乎的，最多做到讲了什么内容，但是还是晕晕乎乎的，因为说真的，他讲课有他自己的逻辑，自己的概念储备，自己的逻辑性的。而我一听，只能任其所为，无法举一反三，只能憋屈地记笔记，其实心里是不爽的，不能知其所以然也。后来，练多了，对其中的一些概念有了自己的理解，才算度过了这种明明感觉学过了的东西，但是却好像没有用的感觉了。重点是什么？是对概念的引入！

简单谈谈form心得

具体的form的简介，属性之类的，我不会多说，这是最基本的概念，大家都不难查到的。这是个重点，概念的引入可以让你知道什么是什么，用在哪里，格式是怎样的，修饰它的属性又是如何作用的？其实，我感觉学HTML从开始就应该清晰自己的思路，因为全都是零碎的点，而且单单只是html的话，没有太多功能和花样可以玩，也让你没有什么任务可以练习，如果单单敲代码，打出个没有渲染的网页，你又会觉得好无趣。所以，缺乏练习的情况下，更需要理清思路，分清因果，然后才会学到家的。

比如标签，每个标签都有定义，应用范围，为了让标签更生动，应用面更广，会有各个属性延伸，更精确到某一特定场景的。然后就是为了让浏览器能知道你写了什么，你写的必须要规范，要符合浏览器可以解析出来的格式。好比，我们在学数学时，会有变量，有函数，公式，概念，条件，题目场景，基本上会是一个套路的。首先，我们要做的是，规范自己，知道html的语法和格式，这是个应式模板，也藏着一些逻辑在里面，可以推敲的。具体，我会在练法中，分析事例的。

练习

form表单大致有单选类，多选类，下拉类，文本类，创建按钮等等吧，先把常见的练习下。

输名字输密码之类的文本框

代码如图

这是一个简易的登录窗口，有输入帐户名，密码，提交的功能吧，具体效果如图：

注意：这里的字体颜色和背景是我在全局设置的，跟这些代码没关系，不要纠结。

我啥都没输入，用户名怎么默认yong了？看代码里，这是value的赋值功能，你还可以删除它，然后会显示“你的名字”这几个字，跟下面“你的密码”一样了，这是input里的placeholder这个占位符的功劳了，作为提醒用户输入什么内容，提交时只是提交用户写进去的东西。

label这个标签是给目标，比如用户名，密码这些目标加功能的，用在选项类里面，能发挥点选项也能选中选项框的功能，下面也会练到。这里的for是引出作用对象，这个标签的作用对象是谁，就for谁，跟action一个语境，所以在学数学时我们经常假设个值，好完成逻辑，这里给作用对象input这个框加个标签，就完成了互相间的联系。这种做法经常会用到，就是为了完成逻辑的。

target这个就不陌生了，描述完input之后，点submit这个按钮，会打开新网页，而不是在当前文件页面。action是让form表单提交的内容送到哪个url或者文件路径那里，这里是随便输的。method的值这里是get,给的意思，还要讲一种值是post，是要的意思。

button仅仅是为了比较跟input做出的按钮的感官如何的。实际上觉得，功能差不多。不过可以单独修饰按钮这个事了。大家可以练一下，找感觉的。

reset是重置你写的内容，点了之后，恢复框内最开始状态。

name就是给作用对象起名字，这个名字是个变量，而且也是有通用语义的，好像X ，Y一样，可以被赋予很确切的值，起的名字最关键的是让服务器看的，而value就是可以赋予确切的值的，在提交选项结果时，服务器依靠name找到对应的value值。

强调一下，form里面，input提交的内容必须要有name这个参数，name就是key，到了服务器内容变成keyvalue形式。这是为了跟服务器对接识别input的内容是哪一个语义的内容的。下面的图会让你看到的。

我现在操作我做的这个东西，研究下method的get。先用终端进入文件所在目录，运行http-server,还有以静态服务器打开页面。

名字默认yong,没改，密码输了123456。点了下submit按钮。然后新打开网页，提示我找不到，因为地址是我随意打的。我在网页右击，点检查，如图

有警告，我点开看了下，我的用户名和密码竟然以某种方式赤裸裸地展示在服务器文件里了，我是请求登录的，把自己的信息给了“服务器“。如图

连网页地址都是包含登录信息的，这确实很不安全。

这里引入一个安全隐患csrf——跨站脚本攻击。推荐资料《程序猿必读-防范CSRF跨站请求伪造》。

然后，我把源代码里的get改成post,再操作下，这次没有报错找不到网页了，但是打开了一个空白网页，啥都木有，我再右击检查，继续操作，如图：

这次，比较一下get和post的区别，至少看出我的信息一个是赤裸裸地表现在一个服务器加工出来的url中，一个不显示，却出现在数据包里了。具体的区分，请自行查询，太多了，我不做多解释。只是记住，get会把提交的所有的input的name和其value值拼接成url发给服务器。post相比更安全就好了，还有对csrf的防范也是一个点，大家一点要看的。在input中加个随机值可以有效预防的

自己打开网站，服务器发给用户一个随机数，用户提交时，服务器会比较提交时数据里有木有相同的随机数。

单选和多选

代码如下

效果

这是单选的，同样是用的label扩大选择面积的，如果想设定默认选项就用里面的checked去修饰，后面的trul可以省略的。同一道单选题，所有的选项必须要name值相同。

注意，input必须要有value值，因为是单选，name相同，提交的话，必须要区分。

这里点下div，我同样可以为它加class命名的，没有影响。不过老师这么写了，我思考了下，这就是规范性和条理性了，不仅仅自己看更逻辑清晰，别人看也方便。听大佬们说过，一个程序员的发展除了遵循必须的语法啊，规则啊之外，必须要有自己的风格，越想越有意思。

多选的如下图

效果如图

还有多选的另一种应用代码，如图：

当然，这些input没有value值，可以互相比较一下的。

下拉选项

代码如图

.这个比较单一了，除了再次强调name 是定函数的， value是赋值的值，服务器收到的是keyvalue。简单，不多说了。

其他的练习点

代码如下

效果按顺序如图

选择文件，比如文件上传，只接受两种图片文件

多行文本，区别于text的一行，其中的value值是在textarea标签中间输入的，而不是在标签内赋予。cols是行，rows是列。

日期，点一下会出现日历

数字框，点下会有上下箭头调数字

搜索栏，随意

输入邮箱，格式不对，会有提示

输入网址，同上

颜色调整

一个调整条

补充

不会提交

类同于disabled。

这里路线其实很清晰了，什么情况下，用什么标签，标签的属性的name定义，对name 的赋予value值，细节操作是为了各种功能的，也就是其他标签的修饰功能了，主要是要明白自己要做什么，服务器要得到什么。