html表单用法简介

<form> 元素

HTML 表单用于收集用户输入。
<form action="233" method="post"> .... </form>
action
当前表单的提交地址
method
发送数据的http方法，有get和post两种
target
在何处打开 action URL
post 和 get 方式的区别

• 表象不同，get把提交的数据url可以看到，post看不到
• 原理不同，get 是拼接 url， post 是放入http 请求体中
• 提交数据量不同，get最多提交1k数据，浏览器的限制。post理论上无限制，受服务器限制
• get提交的数据在浏览器历史记录中，安全性不好
  场景不同，get 重在 "要", post 重在"给"

<input> 元素

<input> 元素是最重要的表单元素。
<input> 元素有很多形态，根据不同的 type 属性。
text
定义单行输入文本框

<input id="username" type="text" name="username" value="龙傲天">

例.png
password
定义密码字段

<input id="password" type="password" name="password" placeholder="输入密码">

例.png
radio
定义单选按钮，用name分组，用value分项

<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女

例.png
checkbox
定义多选按钮

<input type="checkbox" name="hobby" value="game">游戏
<input type="checkbox" name="hobby" value="novel">小说
<input type="checkbox" name="hobby" value="study">学习

例.png
button,submit,reset
button定义按钮
submit定义提交表单数据至表单处理程序的按钮
reset定义重置按钮

<input type="button" value="按钮" /> 不会提交
<input type="submit" value="提交" /> 会提交
<input type="reset" value="重置" /> 重置输入

例.png

<textarea>元素
多行文本框

<textarea name="comment" cols="30" rows="10">
        红红火火恍恍惚惚
##</textarea>

例.png

<option>元素

下拉菜单

      <select name="car">
        <option value="大黄蜂">大黄蜂</option>
        <option value="擎天柱" selected>擎天柱</option>
        <option value="威震天">威震天</option>
      </select> 

例.png
selected
默认选项