您现在的位置是: 网站首页> 前端技术> HTML HTML

HTML 常见表单元素与属性的使用

Smile 2020-05-07 HTML Javascript 阅读:230

简介HTML 表单用于收集用户输入,在 web 开发中大量使用到,表单由不同类型的 input 元素、复选框、单选按钮、提交按钮等表单元素构成,这里简单总结下常见的表单元素

1、<form> 元素定义 HTML 表单,具有如下属性

  accept-charset   规定在被提交表单中使用的字符集(默认:页面字符集)
  action   规定向何处提交表单的地址(URL)(提交页面)
  autocomplete   规定浏览器应该自动完成表单(默认:开启)
  enctype   规定被提交数据的编码(默认:url-encoded)
  method   规定在提交表单时所用的 HTTP 方法(默认:GET)
  name   规定识别表单的名称(对于 DOM 使用:document.forms.name)
  novalidate   规定浏览器不验证表单。
  target   规定 action 属性中地址的目标(默认:_self)

2、 HTML 所有表单元素

(1)<input> 元素是最重要的表单元素,根据不同的 type 属性,可以变化为多种形态,例如

<input type="text" name="username">
<input type="radio" name="sex" value="0">
<input type="radio" name="sex" value="1">
<input type="checkbox" name="savor[]">
<input type="checkbox" name="savor[]">

(2)<select> 元素定义下拉列表,示例

<select name="savor">
	<option value="1">唱</option>
	<option value="2">跳</option>
	<option value="3">rap</option>
	<option value="4">篮球</option>
</select>

(3)<option>通常和<select>配合使用,通过添加 selected 属性来定义预定义选项,默认首个选项显示为被选选项

<option value="2" selected>跳</option>

(4)<textarea> 元素定义多行输入字段(文本域)

<textarea name="content" rows="10" cols="30">
大家好,我是练习时长两年半的个人练习生,喜欢唱,跳,rap.
</textarea>

(5)<button> 元素定义可点击的按钮

<button type="button">确认提交</button>

(6)HTML5 <datalist> 元素

  • <datalist> 元素为 <input> 元素规定预定义选项列表
  • 用户会在他们输入数据时看到预定义选项的下拉列表
  • <input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性

示例

<form action="user.php">
    <input list="cid">
    <datalist id="cid">
        <option value="音乐">
        <option value="地理">
        <option value="体育">
    </datalist> 
</form>

3、<input>元素的多种 type 属性

  常见 type 输入属性
  属性   描述
  text   定义文本输入字段
  password   定义密码输入字段
  radio   定义单选按钮
  checkbox   定义复选框
  button   定义按钮
  submit   定义提交表单数据至表单处理程序的按钮
  HTML5 type 输入类型,老式 web 浏览器不支持的输入类型,会被视为输入类型 text
  属性   描述
  number   定义数字值的输入字段
  date   定义日期的输入字段
  color   定义颜色的输入字段
  range   定义一定范围内的值的输入字段
  month   允许用户选择月份和年份
  week   允许用户选择周和年
  time   允许用户选择时间(无时区)
  datetime   允许用户选择日期和时间(有时区)
  datetime-local   允许用户选择日期和时间(无时区)
  email   定义电子邮件地址的输入字段
  search   定义搜索输入字段
  tel   定义电话号码的输入字段
  url   定义 URL 地址的输入字段

4、常见的输入字段的限制属性

  属性   描述
  disabled   规定输入字段应该被禁用
  readonly   规定输入字段为只读(无法修改)
  max   规定输入字段的最大值
  min   规定输入字段的最小值
  maxlength   规定输入字段的最大字符数
  pattern   规定通过其检查输入值的正则表达式
  required   规定输入字段是必需的(必需填写)
  size   规定输入字段的宽度(以字符计)
  step   规定输入字段的合法数字间隔
  value   规定输入字段的默认值

很赞哦! (0)

文章评论

站点信息