form基础表单

课程目标

• 熟悉常见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方式的区别？

1. 数据提交方式不同，get把提交的数据url可以看到，post看不到
2. get一般用于提交少量数据，post用于提交大量数据
3. get最多提交1k数据，浏览器的限制。post理论上无限制，受服务器限制
4. 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>