HTML 表单用法

表单基本结构

<form action="URL" method="get/post">
  <input type="text" name=""  placeholder="请输入用户名"/>
  <input type="password" name="" />
  <textarea rows="3" cols="20"></textarea>
  <input type="submit" value="Submit" />
</form>

Form 表单作用

• 向服务器传输用户输入数据
• action 属性 => 当提交表单时向指定地址发送表单数据。
• method 属性 => 指定传输方式

get post 区别

• get：
  1.不安全传输方式，会把输入的信息在url链接上面显示，泄露信息。
  2.传输速度快。
• post：
  1.比起get 它会更安全，不会把在url链接上泄露信息。
  2.传输速度慢。
  如果传递的信息不重要的情况下可以选用get传输，重要的信息不愿意泄露还是用post。
  （区别还是有很多，但目前我了解到的是这些，以后会更新）

input用法

1.type属性 => 根据不同的type属性值 会收集到用户的信息

---

• text => 输入文本
• password => 填密码
• file => 文件上传
• radio => 单选按钮
• checkbox => 多选按钮
• reset => 重置按钮
• submit => 提交表单按钮
• hidden => 隐藏表单 用于后台传参数又不需要显示
  type属性还有很多，而且html5也新出了type属性，根据自己的需求自行选择

2.input里name的作用 => 用于对数据的描述，后端通过method传递数据
3.placeholder的作用 => 用于对输入内容的提示

textarea

多行的文本输入控件

---

和 input 的区别是它可以容纳无限数量的文本，而后者有默认限制的字数。

js获取文档表单的集合

document.forms
eg:

<form name="Form1"><input type="text" name="name"></form>
<form name="Form2"></form>
<form name="Form3"></form>

console.log(document.forms[0].name);       //Form1
console.log(document.forms[1].name);      //Form2
console.log(document.Form1.name);       //<input type="text" name="name">

直接获取元素

forms["myForm1"]就可以根据名字取的相应的form
forms["myForm1"]["name"]根据这个相应的form里名字为name的input元素
document.Form1.name 也可以直接访问元素；