HTML进阶（3）- 表单元素

本系列笔记是基于【渡一教育】袁进老师的html+css基础课程而记录，仅作为个人记录以及阅读使用。

表单元素

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

input元素

输入框

• type属性： 输入框类型

  • text 普通文本输入框
  • password 密码框
  • date 日期选择框，会有兼容性问题
  • search 搜索框，会有兼容性问题
  • color 颜色选择框
  • number 数字输入框，可以设置min、max，step，会有兼容性问题
  • checkbox 多选框，要写names哦，checked默认选中
  • radio 单选框，要写names哦，checked默认选中
  • file 选择文件
  • button/submit/reset ，input可以表示按钮。分别是 普通按钮/提交按钮/重置按钮，可以用value设置按钮上的文字
  • range 滑动条，可以设置min,max

• value属性：输入框的值

• placeholder属性：显示提示的文本，文本框没有内容时显示

input元素可以制作按钮

select元素

下拉列表选择框

通常和option元素配合使用，selected默认选中

textarea元素

文本域，多行文本框

可替换元素

按钮元素

button 元素

type：button/reset/submit 默认值submit

表单状态

readonly属性：布尔属性，是否只读，不会改变表单显示样式
disabled属性：布尔属性，是否禁用，会改变表单显示样式

配合表单元素的其他元素

label

普通元素，通常配合单选、多选框使用

• 显式关联

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

• 隐式关联

<!--显式-->
<input id="radMale" type="radio" name="sex"  checked><label for="radMale">男</label>
<input id="radFemale" type="radio" name="sex"><label for="radFemale">女</label>

<!--隐式-->
<label><input type="radio" name="sex" >男</label>
<label><input type="radio" name="sex" >女</label>

datalist

数据列表

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

form元素

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

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

fieldset元素

表单分组

参考资料

1. 【渡一教育】袁进老师的html+css基础课程
2. 【渡一教育】袁进老师相关课程源代码