HTML + CSS 宝典(六. HTML进阶---- 表单元素)

表单元素

一系列元素,主要用于收集用户数据

input 元素

输入框

  • type属性:输入框类型

type: text , 普通文本输入框
type: password, 密码输入框
type: date, 日期选择框,兼容性问题
type: search, 搜索框,手机端时右下脚的按钮会变成搜索框
type: number, 数字输入框
type: checkbox, 多选框
type: radio, 单选框

  • value属性:输入框的值
  • placehoder属性:显示提示的文本,如果文本框没有内容显示

input元素可以制作按钮,如果需要兼容很古老的用户可以用input元素做按钮,如果不需要兼容很古老的用户,不用它做按钮, 用button,现在都用button

当type值为reset、button、submit时,input表示按钮

select 元素

下拉列表选择框

通常和option元素配合使用

textarea元素

文本域,多行文本框

按钮元素

button

type属性: reset、submit、button, 默认值是submit

表单状态

readonly属性:布尔属性,是否只能读,不会改变表单显示样式

disabled属性:布尔属性,是否禁用,会改变表单显示样式

配合表单元素的其他元素

label

普通元素,通常配合单选和多选框使用

  • 显示关联:

可以通过for属性,让label元素关联某一个表单元素,for属性书写表单元素id的值

  • 隐式关联:见例子

datalist

数据列表

该元素不会显示到页面,通常用于和普通文本框配合使用

form

通常,会将整个表单元素,放置到form元素的内容, 作用是当提交表单时,会将form元素内部的内容以合适的方式提交到服务器。

form元素对开发静态页面没有什么意义

fieldset元素

表单分组

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容