课程名称:初识HTML(5)+CSS(3)-升级版
课程章节: HTML5表单标签,与浏览者交互
主讲老师:五月的夏天
今天学习的内容包括: input
如何使用单选框、复选框。如何使用select
和option
创建下拉框。input
如何实现提交和重置按钮。
单选框和复选框的使用方法<input type="radio/checkbox" value="值" name="名称" checked="checked"/
,当 type="radio"
时,控件为单选框, 当 type="checkbox"
时,控件为复选框。value
表示提交数据到服务器的值(后台程序PHP使用)。name
表示为控件命名,以备后台程序 ASP
、PHP
使用。checked
表示当设置 checked="checked"
时,该选项被默认选中。我们需要注意的是同一组的单选按钮,name
取值一定要一致,这样同一组的单选按钮才可以起到单选的作用。
使用select
、option
标签创建下拉菜单。其中select
和option
标签都是双标签,它总是成对出现的,需要首标签和尾标签。select
标签里面只能放option
标签,表示下拉列表的选项。option
标签放选项内容,不放置其他标签。设置selected="selected"
属性,则该选项就被默认选中。
value如下图
在表单中有两种按钮可以使用,分别为提交按钮和重置按钮。当用户需要提交表单信息到服务器时,需要用到提交按钮。提交按钮的type
类型为submit
。使用方法<input type="submit" value="提交">
。只有当type
值设置为submit
时,按钮才有提交作用。value表示按钮上显示的文字。
当用户需要重置表单信息到初始时的状态时,比如用户输入“用户名”后,发现书写有误,可以使用重置按钮使输入框恢复到初始状态。只需要把type
设置为"reset"
就可以。只有当type
值设置为reset
时,按钮才有重置作用,value
和上面的submit
的value
含义一样。
今天学习了HTML5表单标签,与浏览者交互中6-9到6-12的4个小结,花费了34分钟,学习完这几节,我们想要在网站中实现我们爱好的选择,我们就会用到checkbox
,因为我们爱好可能不止一个,可能存在多个选择。网站中增加性别选择,我们就会使用到radio
来实现单选。当我们进行表单的信息提交以及重置时,会用到submit
和reset
属性,这些我们在编写表单信息时都会用到。