HTML - 表单元素/GET和POST

在这里插入代码片

HTML中还有一类标签，用户可以用他们输入或选择，向后台服务器发送数据。

因为需要把他们放在form（表单）标签中，所以飞哥把他们称之为表单标签。

form标签
form标签界定哪些表单标签的内容需要被提交到后台。

通常来说，表单标签都要放置在form标签中——否则，他们的内容不会被提交到后台（强调：常见错误！）


form标签中需要理解以下几个属性：

action：指示表单提交到哪里处理，或者由谁来采取行动，相应form提交，默认为当前页面。
method：指示表单以何种方式提交到后台，常用的是get（默认）或post，区别后文详述。
PS：什么是“默认”？当你（开发人员）不进行指示的时候，被指示对象（计算机相关应用，如浏览器、编译器、解释器等）自行使用的选项。

按钮

按钮有两种写法：

    
    
    type可以有三个值：

提交（submit）
重置（reset）
普通按钮（button）

文本类标签
单行文本框（text）

    用户名：

密码输入框（password）

    密码：

隐藏文本域（hidden）

label是一个语义标签，效果和span差不多。按HTML规范，label通常和input配套使用；label和span的区别，类似于header和div的区别。

后面我们会发现：大多数表单标签名都是 input，区别他们的是 type。type="text"，表示这是一个文本框；type="password"，表示这是一个密码输入框……

name和value
name通常都是要写的，因为

所有提交到后台的数据都是“键值对”形式的字符串，
name是键值对中的“键”，是后台区分传入值的唯一来源
没有name的表单元素无法提交到后台
value代表用户的输入，可以给定一个初始值。value属性也可以不写，就显示一个空白的文本框。

F12演示：为了暂停页面跳转，需要：

action="/"
IndexModel上添加[IgnoreAntiforgeryToken]
在OnPost()上设置断点，需要

disabled和readonly
disabled：禁用。既不能修改，也不会往后台传值

readonly：只读。不能修改，但还是能够往后台传值。但是，并不是所有表单标签都能够生效。

PS：根据HTML5规范，disabled和readonly都可以不带属性值，即只要有这个属性，就表明该元素需要disabled或readonly。如果一定要属性值，属性值就是disabled或readonly

多行文本框（textarea）

    自我介绍：

    飞哥飞哥

注意：

它的标签名是textarea，不是input
没有value属性，默认值设定在标签文本中
以后学JavaScript的时候，取值赋值会有一些差异。

常见面试题：GET和POST

HTTP协议
客户端和服务器端交互的信息分为：：

Request/Response：实际上，用户在浏览器中输入URL，回车，浏览器就会向服务器发送一个请求（Request）；然后，服务器就会响应（Response）这个请求，将相应的HTML文件返回给浏览器。

Header/Body：无论是Request和Response，除了URL和Html文件，还有一些额外的信息，存放在他们的Header中。
GET和POST就是定义在Request的Header中的，向服务器说明，用何种方式方法（method）进行请求的标记数据。

一般来说，地址栏直接输入网址，或者在网页中点击链接，默认都是GET方式；只有在form标签中定义了method="post"，浏览器才会使用POST方式发送请求。我们可以使用调试器F12，在Network中查看：

传输数据
这个时候，我们应该理解：form表单本身并不传递数据，是浏览器将form表单中的数据进行“翻译”，然后再传递给服务器！

如果form中method属性设置为get，浏览器使用GET方式，将form表单中的数据转换成URL参数，传递给服务器。注意观察URL的变化：
http://localhost:57210/Register?username=dfg&fg=%E6%BD%9C%E4%BC%8F%E8%80%85&selfDescription=%E9%A3%9E%E5%93%A5%E9%A3%9E%E5%93%A5参数以?标记开头；每个参数等号左边是name，右边是value；多个参数间用&分隔。如果参数值不是英文和字母，会被浏览器自动编码，结果如上所示。
如果form中method属性设置为post，浏览器使用POST方式，将form表单中的数据转换成Form Data，传递给服务器。（按HTTP协议，GET请求没有Form Data项）

来龙去脉：（参考HTTP的发展）

最早的HTTP协议既没有POST，也没有Header……

Header（尤其是其中的ContentType）为HTTP的发展（扩展）立下了汗马功劳

常见错误
在网上流行着很多说法，很多都是不准备的。大致上来说，错误原因有两类：

1）没有区分“HTTP协议”和“浏览器实现”：比如说“GET传递数据有个数/长度/大小限制”等，这些限制都是浏览器的限制，HTTP协议从未限制过URL参数。

2）没有区分关于“隐蔽”和“安全”：POST不会在地址栏中显示Form Data，我们可以说它更隐蔽一点，但它一样用明文（没有加密）传递，怎么就安全了呢？我们都能用F12看到，黑客们还获取不到么？^_^ 。注意，HTTP本身是一个不安全的协议，在Web开发中，安全是一个非常重要的考量因素。大家时刻牢记飞哥的两句话：

前端没有任何安全性可言
后端永远不要相信前端
最后，总结一下，GET和POST：

本质区别：http头中method项定义不同。定义为method=POST，可以用Form Data传递数据
语义层面：GET是请求得到（读）；POST是传递给服务器（写）

开发选择
post：form表单

get：需要url参数

选择标签
不需要用户输入（字符），只需要点击鼠标选择即可的标签。

单选框

语法要点：

仍然使用name和value想后台传值，只是这里的value用户无法修改
标签名仍然是input，由属性type="radio"决定它是一个单选框
用包裹住input标签，点击整个label标签都可以作用于单选框
input中添加属性checked，就可以设置一个页面加载时的默认选中项
可以disabled，无法readonly
具有相同name的多个radio，就是一组，一组radio，只能选中一个——这就是radio被称之为“单”选框的原因。

复选框

爱好：
乒乓球
象棋
LOL

语法要点：同radio的1-5，其他：

同组的checkbox可以选中多个，所以它被称之为“复”选框
被选中的checkbox的键（名）值对，才会传递到后台；未被选中的checkbox，整个键值对都不会传，而不是传一个空值什么的！
如果说没有给checkbox的value赋值，选中之后往后台传递的值为：on

下拉列表

    年龄：

语法要点：

name在select标签里面
有value，就传value，没有就传文本text
默认选中项用 selected 属性标识
可以在select中添加multiple，将其变成可多选菜单

文件上传
除了使用type="file"指定input用于文件上传，还需要在form中设置：enctype="multipart/form-data"

否则，form元素默认使用：enctype="application/x-www-form-urlencoded"，就只会向后台发送文件名，而不是文件内容：

form中指定
F12中查看
enctype="multipart/form-data"

enctype="application/x-www-form-urlencoded"

HTML5新标签/属性
修改input标签的type为：

color：让用户可以选择颜色
date/datetime/month/week……：让用户选择日期/时间等
email/tel/url：可以验证用户的输入是否符合Email/电话/URL的格式要求
number/range：用户可以输入数字和比例
……
目前逐渐开始使用的一些属性：

novalidate：用于form，禁用掉HTML5自带的验证
formaction：用于提交按钮，可以指定点击该按钮将form表单提交到那个网址处理（覆盖form中的设置），在一个form中可以有多个按钮时有用
multiple：主要使用在文件上传框（type="file"）中，用户按住ctrl键，可以选择多个需上传文件
placeholder ：文本输入框有用，可用做提示
用得并不多。主要是因为：

需要浏览器支持
样式并不好看
用处似乎并不大，^_^

作业
参考以下页面，尽可能多的完成其HTML部分的内容：

HTML - 表单元素/GET和POST

你可能感兴趣的:(javascript)