表单的初始介绍

表单

收集不同类型的用户输入

form 表单区域

<form>
表单元素
</form>

申明表单区域

表单元素

input类型

• 空元素

<input type="input类型">

• text 单行文本输入框

• password 密码域（默认掩码处理）

• radio 单选按扭 （通过指定相同的name属性值，组成单选按钮组，实现单选）

   性别：
  <input type="radio" name="students">女生
  <input type="radio" name="students">男生
  

• checkbox 复选框

  兴趣爱好: <input type="checkbox">吃<input type="checkbox">喝<input type="checkbox">玩<input type="checkbox">乐
  

• button 按钮（普通按钮）

• submit 提交按钮（带有默认事件——提交动作）

• reset 重置按钮（带有默认事件-——清空重置表单元素）

  <input type="button" value="按钮">
  <input type="submit" value="提交">
  <input type="reset" value="重置">
  

  修改按钮上的字使用value属性

• image 图像域 （另一种类型的提交按钮）

  <input type="image" src="btn.jpg" alt="抢购">
  

  • src=“图像资源地址”
  • alt=“替换文本”

textarea文本区域（多行文本框）

<textarea>内容</textarea>

select 列表菜单（下拉菜单）

 <select name="" id="">
     <option value="">北京</option>
     <option value="">成都</option>
     <option value="">上海</option>
     <option value="">天津</option>
</select>

• option 选项

label

给表单元素添加注解、标注

<input type="radio" name="students" id="girl">
<label for="girl">女生</label>

• label通过for=“id名称” 实现与表单元素的绑定
• 绑定后，点击label可以使表单元素处于获取焦点状态

表单元素相关属性

value=""

• 初始值（输入框默认的内容，初始值或按钮上的字）

name=""

• 表单元素名称 （区分、作为标识数据的键名）
  • username=ccc 键值对
• 参与提交的表单元素通常要定义name属性

checked

通常用于单选、复选框

• 处于选中状态

  <input type="checkbox" checked>
  

disabled

• 处于禁用状态

<input type="checkbox" disabled>

• 不可操作（置灰）
• 它的数据不会被提交

readonly

• 处于只读状态

<input type="text" readonly>

• 不可以修改值
• 它的数据可以被提交

selected

用于option,

• 使option处于预选定状态

size=“数字”

用于select元素时，控制可显示选项的个数

<select name="" id="" size="2">
            <option value="">北京</option>
            <option value="" selected>成都</option>
            <option value="">上海</option>
            <option value="">天津</option>
</select>

maxlength="数值 "

允许输入的最长字符数

<input type="text" maxlength="5">

form属性

action表单动作

<form action="表单提交地址" >

• 默认当前页面

target=""

目标地址打开方式

<form action="表单提交地址" target=“_blank”>

• _self 当前 默认
• _blank新窗口

method=""

数据提交http方法

<form action="表单提交地址" target=“_blank” method="get">

• GET 默认值
  • 地址栏可见（https://www.jd.com/?username=aaa）
  • 安全性低
  • 查询数据
  • 提交的数据长度有限
• POST
  • 地址栏不可见
  • 安全性高
  • 提交数据
  • 提交的数据量大