HTML表单用法

HTML表单是用于用户与服务器之间的交流互通非常重要的组成部分，日常生活中我们也经常会遇到表单填写的场景，最常见的就是登录注册和问卷调查。
首先说一下form表单的基本组成

<form action="form_action.asp" enctype="text/plain" method="post" target="_black">
  <input type="text" name="name" placeholder="请输入用户名">
  <input type="password" name="pass" placeholder="请输入密码">
<select>
  <option>抹茶冰激凌</option>
  <option>芒果冰激凌</option>
</select>
  <label>性别：</label>
  <input type="radio" name="sex" value="man"> 男
<input type="radio" name="sex" value="woman"> 女
<label>意见或建议：</label>
<textarea></textarea>
……（按照需要可能还有其他构成）
</form>

表单里有一些要注意的点

1. 需要提交的内容必须要用<form></form>包起来才能提交，而且必须给form设置method属性和action属性才能被正确提交，enctype和target属性是可以不设置的。
2. 表单的内容需要给用户以明确的提示这个位置是输入什么内容的，否则会造成用户体验混乱。
   3.每个表单输入项必须有name属性，这个属性设置之后在前台页面是没有展示的，但是在提交后台时是作为某一项的提示项来展示的，是必不可少的，千万不要忘记添加；而且在类似选择性别这种单选的情况下，几个radio属性的input标签的name属性必须完全相同（即同一组name相同）才能达到单选的效果。
3. 每一个表单项都有一个属性叫做value，这个在不同的表单项中的效果都不同，例如给<input type="text" name="name" placeholder="请输入用户名">和<input type="password" name="pass" placeholder="请输入密码">中加入value那么我们就得到了一个带有初始值的输入项，但是给select中的option，<input type="radio" name="sex" value="woman">，<input type="checkbox" name="hobby" value="run">设置value时，我们在前台页面是看不到具体的value值的，事实上我们也没有必要看到这里的value值，这一部分是作为选中的值传到后台的，主要作用是知道我们具体选择了什么以方便服务器处理·。
4. 表单中有一个神奇的东西叫做隐藏域，隐藏域的作用非常广，大到可以识别csrf攻击，小到可以存一个程序员必须要用到的值，下面说一下它的作用

• 隐藏域的写法是<input type="hidden">给他一个value值就可以存储我们需要的内容，这个最好的地方在于他不在页面上显示，也就是说普通用户是看不到这个表单项的，但是在css3选择器中其实是不会忽略隐藏域的，这个需要注意。
• 隐藏域可以用来识别csrf攻击的原理是：在隐藏域中，我们可以给他定义一个类似于密钥的值，当用户提交表单的时候我们可以在后台检测隐藏域的value值是否存在或位置是否是我们设定的位置以及隐藏域的value值是否和我们的”密钥“相等，如果各个方面都能对的起来那么证明这个表单是没问题的，没有受到攻击；但是如果很明显的没有隐藏域或value值出了问题，我们有理由警惕是不是有不法分子在攻击我们的网站。

5. 我们经常会遇到可能需要输入多行文本的情况，这时，再用<input type="text">是没有用的，这个是只用来输入单行文本的小可爱，要输入多行文本，我们还是要借助另一个长的不要太一样的表单项<textarea></textarea>，这货就是专门来写多行文本的，这个地方在使用的时候需要注意一下。
6. 写完了表单我们需要来提交给服务器，那么这个时候有两种方法

• 第一种：直接设置一个<input type="submit">直接点击进行表单的提交
• 第二种：设置一个<input type="button">不进行直接提交，给按钮加一个点击事件，点击的时候提交即可（这种方法是我之前遇到过一个同事用的，提交的时候用button是可以自己定义的，尤其是表单内容需要验证时，但是submit提交就是直接把用户的填入信息提交不做验证，即为自动提交。）