HTML 表单用于收集用户的输入信息。
以下是实例
<form action="">
用户名: <input type="text" name="name"><br>
密码: <input type="text" name="mm">
</form>上面的实例中包含两个普通输入框
<form action="">
用户名: <input type="text" name="user"><br>
密码: <input type="password" name="password">
</form>上面的实例中包含一个普通输入框和一个密码输入框
HTML表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域、下拉列表、单选框复选框等等。
我们可以使用 <form> 标签来创建表单:
<form>
input...
<from>HTML 表单 - 输入标签
多数情况下被用到的表单标签是输入标签 <input>。
输入类型是由 type 属性定义。
文本域
文本域通过 <input type="text"> 标签来设定，当用户需要在表单中输入字母、数字等内容时，就要通过文本域来实现这些功能。
实例
<form action="">
用户名: <input type="text" name="name"><br>
密码: <input type="text" name="mm">
</form>在浏览器中显示
密码字段
密码字段通过标签 <input type="password"> 来定义:
<form>
密码: <input type="password" name="pwd">
</form>在浏览器中显示
注意：密码字符不会明面显示，而是以星号*和小圆点 . 来显示替代显示
单选按钮
单选按钮通过<input type="radio">标签来定义 :
实例
<form action="">
<input type="radio" name="sex" value="man">男<br>
<input type="radio" name="sex" value="woman">女
</form>在浏览器中显示
复选框
复选框通过<input type="checkbox"> 标签来定义：
实例
<form>
<input type="checkbox" name="vehicle" value="music">我喜欢听歌<br>
<input type="checkbox" name="vehicle" value="mkbk'">我喜欢看花园宝宝
</form>在浏览器中显示
提交按钮
提交按钮 <input type="submit">通过标签来定义：
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>在浏览器中显示
练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding:0 ;
margin: 0;
}
body{
background-color:#8b8b8b;
}
span{
color: #acb1b7;
font-size: 12px;
padding-left: 2px;
}
#max{
width: 753px;
margin: 0 auto;
}
.dl{
border: 3px solid #e8f0fc;
width:700px;
height: 174px;
margin: 0px 23px 0px 23px ;
}
.dl h5{
background-color: #f4f8fc;
padding-left:20px ;
font-size:15px;
}
.zh{
background-color: #ffffff;
text-align: center;
padding:16px 0px;
}
.an input{
padding-top: 20px;
width: 100px;
}
.mk{
float: right;
padding-right:170px;
font-size: 12px;
}
.mk a{
color: #0055ff;
}
#zc{
border: 3px solid #e8f0fc;
width:700px;
margin: 30px 23px 0px 0px;
}
.xinx{
background-color: #FFFFFF;
}
h6{
padding-right: 290px;
padding-bottom: 20px;
}
.xinx{
text-align: center;
}
.xinx-2{
line-height:30px;
}
.xinx-2 img{
width: 80px;
padding-left:10px;
}
.ll input{
width: 120px;
margin: 20px 0px 0px 175px;
}
.ll {
font-size: 12px;
}
</style>
</head>
<body>
<div id="max"><br>
<div class="dl">
<h5>登录</h5>
<div class="zh">
<p>登录账号：
<input type="text" name="dlzh" ><span>5~10个字符</span>
</p><br>
<p>登录密码：
<input type="text" name="dlmm" ><span>至少6个字符</span>
</p >
<p class="an"><input type="image" src="练习2：人人网注册页面/QQ截图20220512140347.png" /> <p class="mk">还没有账号？<a href="">立即注册<a/></p>
</div>
<div id="zc">
<h5>注册</h5>
<div class="xinx">
<h6>账户基本信息</h6>
<p>登录账号：
<input type="text" name="dlzh" ><span>5~10个字符</span>
</p><br>
<p> 昵称：
<input type="text" name="dlmm" ><span>至少4个字符</span>
</p >
<p>
性别：
<input type="radio" name="nan" id="man" value="" checked>
<label>帅哥</label>
<input type="radio" name="nan" id="woman" value="" >
<label>美女</label>
<input type="checkbox" name="nv" id="woman" value="" >
<label>不公开</label>
<div class="xinx-2">
<h6>账户安全设置</h6>
<p>登录密码：
<input type="text" name="dlmm" ><span>至少6个字符</span>
</p >
<p>确认登录密码：
<input type="text" name="dlmm" ><span>请再次输入密码</span>
<p>真实姓名：
<input type="text" name="zsxm" ><span>至少4个字符</span>
</p>
<p> 身份证号：
<input type="text" name="sfzh" ><span>15或18位的身份证</span>
</p>邮箱地址：
<input type="email" value="@" ><span>6-100个字符</span>
</p>
<p>
验证码：
<input type="text" name="yzm" >
<img src="练习2：人人网注册页面/QQ截图20220512151152.png" ><img src="练习2：人人网注册页面/QQ截图20220512153909.png" >
</p>
<p class="ll">
<input type="image" src="练习2：人人网注册页面/QQ截图20220512151322.png"/>如果您已有账号，可<a href="#">直接登录</a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
显示效果如下
