表单标签

什么是表单

• 收集用户信息的

什么是表单元素

• 什么是元素
  • 在html中,标签/标记/元素都是指html中的标签
    例如:<a> a标签/a标记/a元素
• 表单元素就是一些特殊的标签

表单格式

<form>
    <表单元素>
</form>

常见表单元素

input标签

• input标签的type属性非常重要,有多种取值,决定了不同的功能和外观
  • 明文输入框 <input type="text">
  • 暗文输入框
  • 默认值
  • 所有表单元素都要写在<form></form>中

<form action="">
    <!--明文输入框-->
    账号:<input type="text">
    <!--暗文输入框-->
    密码:<input type="password">
    <!--可以指定默认值-->
    账号:<input type="text" value="abc">
    密码:<input type="password" value="123">
<!--单选框
注意点:
    默认单选框不会互斥
    互斥必须给每个单选框设置相同的name属性
    默认选中值,添加checked属性
    如果属性取值和属性名称一样,可以只写一个.但是在XHTML中必须写上取值,推荐不要省略
-->
    性别:
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <input type="radio" name="gender" checked="checked">保密
    <!--
    多选框
    -->
    爱好:
    <input type="checkbox" checked="checked ">篮球
    <input type="checkbox">足球
    <input type="checkbox"  checked="checked">乒乓球
</form>

表单按钮

• 定义普通按钮<input type="button" value="我是按钮" >
• 图片按钮: <input type="image" src="tupian.jpg">
  • 作用:配合js完成一些操作
• 重置按钮: <input type="reset">
  • 作用: 清空表单中填写的内容
  • 注意点:可用value属性指定显示名称
• 提交按钮: <input type="submit">
  • 作用:将以写好的表单提交到服务器
  • 注意点:提交时要具备两个条件
    • form表单的action属性,指定服务器地址
    • 给需要提交到服务器的元素添加name属性
• 隐藏域: <input type="hidden">
  • 作用: 配合提交按钮将一些数据悄悄的提交到服务器(Ajax)

Label标签

• 需求: 默认情况文字和输入框没有关联,不能点击聚焦.
• 作用: 用Label可以绑定文字和表单
  1. 给文字加Label标签
  2. 给input加id属性
  3. 给Label加for属性,值设为对应表单id

<form>
    <label for="account">账号:</label>
    <input  type="text" id="account">
</form>

• 更简便做法:用Label包裹文本和表单(局限不能随意更换聚焦对象)

<Label>
    账号:<input type="text" >
</Label>

Datalist标签

• 给输入框绑定待选项
• satalist 格式

<datalist id="id">
    <option>待选项</option>
</datalist>

• 绑定
  1. 输入框
  2. datalist列表
  3. 给datalist添加id
  4. 给输入框加list属性,值为datalist的id
• 仅了解,因为支持的浏览器少

H5新增input标签

• chrome支持最好
• email/url/number/date/color
• 但是仅作为了解

表单非input标签

select标签

• 作用:定义下拉列表
• 格式:

<select>
    <optgroup babel="分组名">
        <option>列表数据</option>
    </optgroup>
</select>

• 注意点:
  • 与datalist形式类似,但有区别
  • 不用绑定给谁,自己就是一个下拉列表
  • 不能输入新内容
  • 可以设默认值 option添加selected属性
  • 分类:给option标签包裹optgroup标签进行分类,label属性是分类名

textarea

• 作用:定义多行文本框
• 格式:<textarea></textarea>
• 注意点:
  • 默认无限换行
  • 默认有自己的宽高
  • 默认可以缩放
  • rows属性指定行数
  • cols属性指定列数

表单练习

• 单选框和多选框的name都需要相同的name值
• 除了提交按钮之外,所有表单都有value属性,value属性就是表单提交给服务器的值
• 一组表单外的边框:fieldset标签
  • 用法: 在from内用fieldset
  • legend标签给边框指定标题
  • 开发一般用不上

50