表单基本结构
<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 也可以直接访问元素;
网友评论