一、课程概述
1、学习课程名称：前端工程师2022版
2、章节名称：HTML5表单标签第一章至第三章
3、讲师名称：一阶段老师
4、课程概述：
（1）表单的创建
（2）基本控件：1）基本控件；2）HTML5新增控件
二、内容分享
（一）表单的创建form
（二）基本控件
1、单行文本框text
type属性值被设置为text的<input>元素可以创建单行文本框：
（1）语法：<input type="text" value="123">
（2）属性：value（表示已经填好的值）、placeholder（占位文字，表示提示文本，将以浅色文字写在文本框中，并不是文本框的值）、disabled（表示用户不能与元素交互，即锁死）
2、单选按钮radio
type属性值被设置为radio的<input>元素可以创建单选按钮：
（1）语法：<input type="radio" >
（2）互斥的单选按钮应该设置它们的name为相同值
（3）属性：value（向服务器提交的就是value的值）、checked（表示默认被选中）
（4）label标签：将文字和单选按钮进行绑定，用户单击文字时也视为点击了单选按钮
需要注意的是：
3、复选框checkbox
type属性值被设置为checkbox的<input>元素可以创建复选框
（1）语法：<input type="cheeckbox" >
（2）同组复选框应该设置他们的name为相同值
（3）属性：value（向服务器提交的就是value的值）
4、密码框password
使用type属性值被设置为password的<input>元素可以创建密码框
1、下拉菜单select
<select>标签，<option>是它内部的选项
6、多行文本框：<textarea>标签
属性：rows（定义多行文本框行数）、cols（定义多行文本框列数），这两个属性都没有单位
7、三种按钮：都是input标签，type属性值不同
（1）button：普通按钮，可以简写为<button></button>
（2）submit：提交按钮
（3）reset：重置按钮
（4）几种按钮的区别
1）<button></button>按钮，按钮上的提示文字，要卸载起始标签和闭合标签之间，且里面不仅可以写文字，还可以写其他内容，如设置图片，该标签可以设置type属性，但添加时就不具备提交表单的能力了
2）input形式的两个按钮，提示文字都需要通过value属性来设置，且input内只能写文字不能设置图片
3）form标签：<button></button>和<input type="submit">都有提交表单的功能
8、新增表单控件<input type="">
（1）颜色选择控件：color
（2）日期选择控件：date
（3）时间选择控件：time
（4）电子邮件选择控件:email
（5）数字控件：number
（6）拖拽条：range
（7）搜索框：search
（8）网址输入控件：url
（9）datalist控件：可以为输入框提供一些备选项，当用户输入的内容与备选文字相同时，将会显示智能感应
三、学习心得
表单控件容易记混，需要多加练习，找到记忆的方法，继续加油！
共同学习，写下你的评论
评论加载中...
作者其他优质文章
