【九月打卡】第9天表单相关知识点总结

一、课程概述

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控件：可以为输入框提供一些备选项，当用户输入的内容与备选文字相同时，将会显示智能感应

三、学习心得

表单控件容易记混，需要多加练习，找到记忆的方法，继续加油！