课程目标
- 熟悉常见input表单的使用方式
- 掌握 POST 与 GET 方式的区别
学习建议
POST 和 GET 的区别这是面试必问的知识点
本节大纲
表单form、输入域input、多行文本域textarea、label、下拉框select、按钮button
课程内容
form
- 作用:用于把用户输入的数据提交到后台
- name: 表单提交时的名称
- action: 提交到的地址
- method: 提交方式，get和post
<form name="myForm" action="/test/6.php" method="get">
<input name="user" type="text" />
<input type="submit" value="提交" />
</form>
post和get方式的区别？
- 数据提交方式不同，get把提交的数据url可以看到，post看不到
- get一般用于提交少量数据，post用于提交大量数据
- get最多提交1k数据，浏览器的限制。post理论上无限制，受服务器限制
- get提交的数据在浏览器历史记录中，安全性不好
input
输入表单，有以下几种常用类型
- type="text": 用于输入文本。placeholder属性（可选）展示的是输入框里的提示，maxlength（可选）限制最大输入长度；
<!-- 要加上name -->
<input name="username" type="text" placeholder="用户名" maxlength=10 />
- type="password": 用于输入密码，输入的内容显示为星号。
<input name="password" type="password" placeholder="密码" />
- type="radio": 单选圆圈按钮。注意：name要相同才能实现单选，value要有值
<input type="radio" name="sex" value="male" /> 男
<input type="radio" name="sex" value="female" /> 女
- type="checkbox": 复选框。加checked属性会默认选上。提交时，如果选中（如bike），则bike=on
<input type="checkbox" name="bike" checked/>自行车
<input type="checkbox" name="car" />汽车
- textarea: 文本域，用于输入多行文本
<textarea name="maneywords" maxlength=10 placeholder="ddd"></textarea>
select
选择列表，selected属性会默认选中该项目
<form action="/test/6.php">
<select name="mycar">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi" selected>Audi</option>
</select>
<button type="submit">提交</button>
</form>
