继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

宣7595077
关注TA
已关注
手记 47
粉丝 2
获赞 1

一、课程概述

1、学习课程名称:前端工程师2022版

2、章节名称:HTML5表单标签第一章至第三章

3、讲师名称:一阶段老师

4、课程概述:

(1)表单的创建

(2)基本控件:1)基本控件;2)HTML5新增控件


二、内容分享

(一)表单的创建form

http://img.mukewang.com/6320856e0001b5ec03230199.jpg 

(二)基本控件

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标签:将文字和单选按钮进行绑定,用户单击文字时也视为点击了单选按钮

需要注意的是:

http://img1.mukewang.com/632085620001333604250118.jpg 

3、复选框checkbox

type属性值被设置为checkbox的<input>元素可以创建复选框

(1)语法:<input type="cheeckbox" >

(2)同组复选框应该设置他们的name为相同值

(3)属性:value(向服务器提交的就是value的值)

4、密码框password

使用type属性值被设置为password的<input>元素可以创建密码框

1、下拉菜单select

<select>标签,<option>是它内部的选项

http://img3.mukewang.com/6320854d0001c19203520099.jpg 

 

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

http://img2.mukewang.com/632085280001e22203410197.jpg


三、学习心得

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


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP