一、表单
表单是一个包含表单元素的区域;
表单元素是允许用户在表单中输入内容,比如:文本域(lextarea)、下拉列表、
单选框(radio-buttons)、复选框(checkboxes)等等
表单使用表单标签:<form>来设置:
<from>
imput元素
</from>
二、常见的表单输入元素
多数情况下使用表单标签是输入标签(<input>)。
输入类型是由类型属性(type)定义的。常见的输入类型如:
文本域(Text Fields)
1、文本域通过<input type="text">标签来定义,当需要在表单中输入字母、数字等内容时,
就会用到文本域。
<form>
First name:<input type="text" name="firstname"><br>
Last name:<input type="text" name="lastname">
</form>
2、密码字段
使用<input type="password">来定义:
<form>
Password:<input type="password" name="password">
</form>
3、单选按钮(Radio Buttons)
使用<input type="radio">来定义表单单选按钮:
<form>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</form>
4、复选框(Checkbox)
使用<input type="checkbox">定义复选框,用户可在其中选取一个或多个
<form>
<input type="checkbox" name="student" value="一年级">一年级<br>
<input type="checkbox" name="student" value="二年级">二年级<br>
</from>
5、下拉单选列表
使用<select>定义一个下拉列表:
<form>
<select name="sex">
<option value="">请选择</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
</form>
6、提交按钮(Submit Button)
<input type="submit">定义了提交按钮
当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接受到的数据进行相关的处理。
<form action="html_form_action.php" method="get">
用户名:<input type="text" name="user">
<input type="submit" value="Submit">
</form>
总结以上知识点:实现以下内容
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
小莫个人信息
</title>
</head>
<body>
<h1>请输入个人信息</h1>
<form action="test-6-2.html" method="get">
姓名
<input type="text" name="name"><br>
银行卡密码
<input type="password" name="password"><br>
性别
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<input type="radio" name="sex" value="人妖">人妖<br>
是否单身
<select name="single">
<option value="">请选择</option>
<option value="单身">单身</option>
<option value="不单身">不单身</option>
</select><br>
个人爱好
<input type="checkbox" name="hobby1" value="唱歌">唱歌
<input type="checkbox" name="hobby2" value="看书">看书
<input type="checkbox" name="hobby3" value="刷视频">刷视频
<input type="checkbox" name="hobby4" value="打游戏">打游戏
<input type="checkbox" name="hobby5" value="干饭">干饭<br>
<input type="submit" value="提交">
</form>
</body>
</html>