HTML--表单类的标签
1.表单元素——文本框
1.1任务描述
本关任务:创建一个input
标签, type
类型为text
,name
属性值为nickName
。
效果如下:
1.2相关知识
一般在网站上填写个人信息的时候,会输入姓名、昵称等信息,这里用到的就是<input>
标签。
你可以使用<input>
标签来创建一个输入框,使用type
属性来指定input
元素的类型,使用name
属性来规定input
元素的名称,它可以对提交到服务器后的表单数据进行标识。
例子如下:
姓名:<input type="text" name="userName"/>
效果如下:
这里type="text"
,表示普通文本的输入。
注意:<input type="text"/>
是以/>
结尾的。
代码文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- ********* Begin ********* -->
昵称:<input type="text" name="nickName"/>
<!-- ********* End ********* -->
</body>
</html>
2.表单元素——文本框
2.1任务描述
本关任务:创建一个input
标签, type
类型为password
,name
属性值为check
,value
值为123
。
效果如下:
2.2相关知识
你可以使用<input>
标签来创建一个输入框,使用type
属性来指定input
元素的类型为密码框,其输入框的值为value
属性的值。
例子如下:
密码:<input type="password" name="pwd" value="123456"/>
效果如下:
可以发现: 密码框的值是以圆点表示的,不会明文显示。
这里type="password"
,表示密码的输入。
代码文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- ********* Begin ********* -->
密码:<input type="password" name="check" value="123"/>
<!-- ********* End ********* -->
</body>
</html>
3.表单元素——单选框
3.1任务描述
本关任务:创建一组单选框,name
属性值为question
。
要求:对每一个选项使用<p>
标签进行换行。
注:这里及后面遇到的文本都是中文符号,比如:
,是中文符号的:
。
效果如下:
3.2相关知识
一般在填写个人信息的时候,都会选择性别,只能选择男或女,这里就用到了单选框 。
你可以使用<input type="radio"/>
来创建一个单选框,需要注意的是:同一组单选框的name
属性的值要一样。
例子如下:
男:<input type="radio" name="sex"/>
女:<input type="radio" name="sex"/>
效果如下:
这里type="radio"
,表示单选框。
代码文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
1. HTML是什么语言?(单选题)<br>
<!-- ********* Begin ********* -->
<p><input type="radio" name="question"/>A:高级文本语言
</p>
<p><input type="radio" name="question"/>B:超文本标记语言
</p>
<p><input type="radio" name="question"/>C:扩展标记语言
</p>
<p><input type="radio" name="question"/>D:图形化标记语言
</p>
<!-- ********* End ********* -->
</body>
</html>
4.表单元素——多选框
4.1任务描述
本关任务:创建一组多选框,name
属性值为relax
。
要求:对每一个选项使用<p>
标签进行换行。
效果如下:
4.2相关知识
一般在填写个人信息的时候,都会有选择兴趣爱好,是可以选择多个的,这里就用到了多选框 。
你可以使用<input type="checkbox"/>
来创建一个多选框。
需要注意的是:同一组多选框的name
属性的值要一样。
例子如下:
<input type="checkbox" name="hobby" />足球 <br>
<input type="checkbox" name="hobby"/>篮球 <br>
<input type="checkbox" name="hobby"/>乒乓球
效果如下:
这里type="checkbox"
,表示多选框。
代码文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
休闲方式:<br>
<!-- ********* Begin ********* -->
<p>
<input type="checkbox" name="relax"/>逛街<br>
</p>
<p>
<input type="checkbox" name="relax"/>看电影<br>
</p>
<p>
<input type="checkbox" name="relax"/>宅
</p>
<!-- ********* End ********* -->
</body>
</html>