表单

表单

• form表单

• 适用场景：

  1.登录，注册页面

  2.搜索功能

  以上情况都需要用户的输入或选择

• 祖先元素：form

  属性：

  action提交地址 （DBA）数据库管理员

  method提交方式 取值：get/post

  get提交信息展示到地址栏 （默认值）

  post 隐藏提交信息

  input标签的required属性代表必填项

  如果提交时添加required属性的input标签没有填写内容

  则会浏览器提醒“请填写此字段”

  当input标签添加了checked属性

  表示选中当前input标签（即默认值）

  仅适用单选和多选框

• label与input关联

  功能：点击label可以直接与目标关联

  注：label的值一定要与input的id值相同

• 单选框

  type取值为radio实现单选框的样式

  name值相同，才实现单选框的功能

• select下拉列表（一般用于城市选择）

select祖先元素

name属性即键名

option后代元素 可选择的项目

option的value值是select的value值

optgroup选项的分组（提升用户体验）

labels属性optgroup在页面的展示内容

注：optgroup是无法选择的

设置默认值，在option标签中添加seleced

• 多选框，复选框

  <input type="checkbox" name="hobby" value="eat">

  数值类型的输入框不可输入非数值的内容右侧会有向上和向下的按钮

  <input type="number" id="nl">

  输入的最大长度maxlength +数值

  placeholder提示信息

  placeholder与value的区别

  1.样式不同，placeholder灰色与value黑色

  2.value表示当前标签的默认值

  3.当激活标签输入内容时，placeholder会消失，value的内容依然存在

  <input type="text" maxlength="11" id="sjh" placeholder="请输入11位手机号">

• 下拉列表

  select下拉列表

  select祖先元素

  name属性即键名

  option后代元素 可选择的项目

  option的value值是select的value值

  optgroup选项的分组（提升用户体验）

  labels属性optgroup在页面的展示内容

  注：optgroup是无法选择的

  设置默认值，在option标签中添加seleced

<select name="city" id="">
                <option value="成都">成都</option>
                <option value="绵阳">绵阳</option>

• 按钮

• 提交按钮

  <input type="submit" value="sumbit">

  value:可以随便改名

   

• 重置按钮

  <input type="reset">

  所有form里的标签恢复默认值

   

• 普通按钮

  <input type="button" value="普通">

   

• HTML5新增按钮

  <button>提交</button>

  多行文本输入框

• <textarea name="" id="" cols="30" rows="10"></textarea>

• 多用于评论区

 

联想搜索框

<input type="text" list="search">
            <datalist id="search">
                <option value="zxs">咨询师</option>
                <option value="js">教师</option>
                <option value="qt">前台</option>
            </datalist>

• 功能：实现：用户输入，联想提示

  input和datalist的关联

  input的list的datalist的值一定要一样

   

键 值 对

name = F74