表单标签2

input标签的submit属性值

• 格式
• 作用
• 注意事项
• 可以用来做什么有趣的事情

解答

• submit属性值的input标签内置在from标签中，需要配合其他属性值的input标签使用，如text/password/checked box/radio
• 当我们点击下submit属性的input标签产生的按钮后会发生什么？（这句话太长了，能够省略地说吗？）
• 思路：submit属性的作用是什么？和其他属性有什么区别？
• 将表单中已经填写好的数据，发送给服务器
• 所以这里是有2个步骤的，用户填写数据，用户提交数据，所以其余的属性的作用就是记录数据，并规定以什么格式来记录数据，submit属性的作用就是提交数据
• 当我们点击下按钮后，数据会被提交到form表单中action规定的地址
• 扩展：为什么action不被设定在submit属性下的另外一个可选属性？这样就能够规定该表单可以提交到不同的地址
• 为什么需要给要提交给服务器的表单元素添加name属性？
• 一个表单中可能会有多个相同属性的表单元素，比如多个input标签都是text属性（电话号码，邮箱等明文格式），添加name属性后后台可以识别
• 扩展：能否用id属性来替代？id属性也具备唯一性
• 当设置好以上的属性之后，点击提交按钮，会发生什么？
• 点击后会跳转到action规定的界面，注意到地址栏，会有URL地址/?name值1=填写的内容&name值2=填写的内容的形式
• 学到nodejs，服务端后才能够理解这些数据怎么用，怎么处理这些数据

解答扩展

• 为什么我们需要一个表单提交到两个不同的地址？
• 或许id属性只局限在前端，如js/css与html中的交互，涉及到后端的交互需要设置另外一套变量

隐藏域

• 概念
• 特点
• 作用
• 应用在哪些场景
• 怎么使用
• 不会在浏览器用户界面中显示
• 不被用户知道地提交某些数据
• 学到ajax的时候才知道真正有什么作用
• <input type="hidden">

概念

• 我们问一个东西是什么，也就是某个东西的概念的时候，我们要怎么样回答这个问题
• 比如，什么鸭子
• 这不容易回答，但是我们可以回答，黄色的，且嘴巴是扁的，且有两只脚的，且有翅膀的，且是鸟类的，类似这样来罗列所有的属性来达到逼近鸭子究竟是什么东西这个概念
• 我们学习某样新的东西的时候也是这样，不断记下的细节
• 一般某个东西在一个类别里面都和其他的东西有着本质的区别，我们可以叫他特点
• 对于工具而言，他的特点决定了他能够办到别人办不到的事情
• 学习的顺序也是循序渐进地，当我们有些东西的特点是能够被继承的，比如我们学到表单，知道表达式用来交互的，区别于表格标签，P标签等单纯用来展示的
• 在我们学到表单元素的时候就不会再去强调这这些元素都是用来和用户交互这个问题，因为我们需要对比的是表单元素之间的区别，此时对比的就是这些元素是以什么样的形式和用户交互的
• 跨级之间的对比反而是令人疑惑的，比如说问道li标签和input标签有什么区别
• 此时应该先提升到他们的上一级做对比，之后再在各自的领域做对比

怎么使用

• 大多数时候我们都会高估自己，或者说认为自己懂了
• 尤其是在写程序上，比如怎么使用隐藏域
• 视频的老师会说，只需要把input标签的type属性改成hidden就可以了
• 简明扼要，但是到项目路上实现才会知道，我们要提交哪些数据？数据是怎么来的？要怎么样才能提交？
• 所以使用的步骤可能是：写一个form标签，里面包含了hidden的input，包含了submit的input，当用户点击了按钮，数据就会提交
• 但是再往大一点呢？form标签要包含在body标签中，甚至你要会写html

- 这个就太大了，所以因材施教，不能光听，要接触一些实际的项目应用才能知道问题出现在哪里