手记

【九月打卡】第5天 初识HTML(5)+CSS(3)-升级版 第6章

课程名称:初识HTML(5)+CSS(3)-升级版

章节名称:第6章 HTML5表单标签,与浏览者交互

讲师姓名:五月的夏天

课程内容:

使用表单标签,与用户交互 - 使用<form>创建表单

文本输入框、密码输入框

placeholder属性的使用

数字输入框

网址输入框

邮箱输入框

使用<textarea>标签创建文本域

lable标签

单选框与复选框

使用select、option标签创建下拉菜单

提交按钮

重置按钮

课程收获:

1.使用表单标签,与用户交互 - 使用<form>创建表单:

(1)表是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。

(2)语法:<form   method="传送方式"   action="服务器文件">

(3)<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。

(4)action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

(5)method : 数据传送的方式(get/post)。

(6)所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 <form></form> 标签之间(否则用户输入的信息提交不到服务器上)。

2.文本输入框、密码输入框:

(1)语法:

(2)value:为文本输入框设置默认值。(一般起到提示作用)。

3.placeholder属性的使用:

(1)placeholder属性为输入框占位符,里面可以放提示的输入信息。

(2)placeholder属性的值可以任意填写,当输入框输入内容时,占位符内容消失,输入框无内容时,占位符内容显示。

4.数字输入框:

(1)input的type属性设置为number,则表示该输入框的类型为数字。

(2)数字框只能输入数字,输入其他字符无效。

(3)数字框最右侧会有一个加减符号,可以调整输入数字的大小,不同浏览器表现不一致。

5.网址输入框:

(1)input的type属性设置为url,则表示该输入框的类型为网址。

(2)数字框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示。

6.邮箱输入框:

(1)Input的type属性设置为email,则表示该输入框的类型为邮箱。

(2)数字框的值必须包含@。

(3)数字框的值@之后必须有内容,否则会报错误提示。

7.使用<textarea>标签创建文本域:

(1)语法:

两个属性可用css样式的width和height来代替:col用width、row用height来代替。

8.lable标签:

(1)语法:<label for="控件id名称">

注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

(2)label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。

9.单选框与复选框:

(1)语法:

<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

(2)type:

   当 type="radio" 时,控件为单选框

   当 type="checkbox" 时,控件为复选框

(3)value:提交数据到服务器的值(后台程序PHP使用)

(4)name:为控件命名,以备后台程序 ASP、PHP 使用

(5)checked:当设置 checked="checked" 时,该选项被默认选中

10.使用select、option标签创建下拉菜单:

(1)select和option标签都是双标签,它总是成对出现的,需要首标签和尾标签。

(2)select标签里面只能放option标签,表示下拉列表的选项。

(3)option标签放选项内容,不放置其他标签。

(4)value:

(5)selected="selected":

设置selected="selected"属性,则该选项就被默认选中。

在浏览器中显示的结果:

11.提交按钮:

(1)语法:<input   type="submit"   value="提交">

12.重置按钮:

(1)语法:<input   type="reset"   value="重置">

今天学习30min,加油!

1人推荐
随时随地看视频
慕课网APP