文章目录

表单元素

input元素(输入框)

button元素(按钮元素)

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

select元素 (下拉列表选择框)

textarea元素(文本域,多行文本框)

datalist元素(数据列表)

form元素 (整个表单元素放在form元素内部)

fieldset元素 (用于表单分组使用)

设置表单状态


专栏目录:HTML专栏

引言

上文我们讲到了注释列表等一些标签的使用方法,今天的主题只有一个元素表单元素。表格元素因为需要借助CSS才能展现,所以我们会在讲解CSS的时候讲解表格元素,持续关注博主,学习不迷路!

表单元素

表单元素有一系列元素,主要用于收集用户数据,接下来会一一列举常见的表单元素

input元素(输入框)

其语法基本格式如下:

input元素类型众多,改变 type 的值能得到需要意想不到的效果的输入框。如下:

type属性输入框的类型

text

普通文本输入框

password

密码框

date

日期选择框,有兼容性问题

search

搜索框,有兼容性问题

range

滑块

number

数字输入框

checkbox

多选框

radio

单选框

file

选择文件上传

在 input 中也可以为输入框配置 value属性:输入框的值 ;placeholder属性显示提示文本,文本框没有内容时显示,一般placeholder属性最为常用。

input元素可以制作按钮

当 type 值为 reset(重置)、button(普通)、submit(提交) 时,input表示按钮。

大家可以看一下代码效果

游戏:阅读:电影:音乐:其他:

性别:男女

button元素(按钮元素)

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

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

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

请选择性别:

隐式关联——直接将 label 嵌套在单选或多选框外面

请选择性别:

 

select元素 (下拉列表选择框)

select元素通常要和option(表示下拉列表的选项)元素配合使用

请选择城市:成都北京南京苏州无锡 

请选择你最喜欢的主播:<!-- 通过  标签把相关的选项组合在一起,label 属性为选项组规定描述,所有主流浏览器都支持 label 属性。 -->周杰伦蔡依林WEedinith00123d

请输入你喜欢的主播:冯提莫蔡依林WETedinfith000123ddd

这里解释一下multiple属性,其是一个布尔属性,规定可同时选择多个选项。

在不同操作系统和浏览器中,选择多个选项的差异:

  • 对于 windows:按住 Ctrl 按钮来选择多个选项
  • 对于 Mac:按住 command 按钮来选择多个选项

由于上述差异的存在,同时由于需要告知用户可以使用多项选择,对用户更友好的方式是使用复选框。

textarea元素(文本域,多行文本框)

请填写简介:

datalist元素(数据列表)

该元素本身不会显示到页面上,通常用于和普通文本框配合使用, 标签规定了 元素可能的选项列表,用来在为 元素提供”自动完成”的特性。用户能看到一个下拉列表,里边的选项是预先定义好的,将作为用户的输入数据。

请输入你常用的浏览器:

谷歌浏览器IE浏览器欧鹏浏览器苹果浏览器火狐浏览器

form元素 (整个表单元素放在form元素内部)

通常,会将整个表单元素,放置form元素内部,作用是当提交表单时,会见form元素内部的表单内容以合适的方式提交到服务器,对开发静态页面没有什么意义。表单能够包含input元素,比如文本字段、复选框、单选框、提交按钮等等。

账号:

密码:

城市:成都重庆北京无锡

fieldset元素 (用于表单分组使用)

通常我们开发的时候,比如登录框,我们会把账号信息和基本信息进行分组

修改用户信息

账号信息

用户账号:

用户密码:

基本信息

用户姓名:

城市:Lorem.Molestiae!Libero.Hic" />A?Ipsum!Facilis.Est?Libero?Officia?

设置表单状态

在日常生活中我们可能会遇到一些根本无法点击的按钮,这就涉及到表单的状态了

readonly属性:布尔属性,只读属性,不会改变表单的样式

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

个人总结:

因为表单元素在日常开发中使用频率极高,像搜索框登陆注册框等都需要借助表单元素的支持,所以这方面的内容要稍稍多一点,所以尽量写细一点吧。如果能够对你有帮助那不枉我深夜码字了,哈哈哈。化神是真的头有点神呼呼的了~~,下期讲解HTML5新特性吧!那么现在,开始学习吧。