liuliuya's blog
0%

前端表单作业

发表于 更新于 分类于

前端课程

完成以下界面：

代码1为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业</title>
</head>
<body>
<h3>请注册</h3>
<p>已有账号？&nbsp;<a href="#">登录</a></p>
<form action="">
    <label for="001">用户名</label>
    <input type="text" name="yhm" placeholder="请输入用户名" id="001"> <br>
    <label for="002">手机号</label>
    <select name="" id="">
        <option value="0" selected>+86</option>
    </select>
    <input type="text" name="yhm" placeholder="请输入手机号" id="002"> <br>
    <label for="003">密&emsp;码</label>
    <input type="password" name="yhm" placeholder="请设置登录密码" id="003"> <br>
    <label for="004">验证码</label>
    <input type="text" placeholder="请输入验证码" id="004">
    <input type="button" value="获取验证码"> <br>
    <input type="checkbox">阅读并接受协议 <br>
    <input type="button" value="注册" name="f"> <br> <br>
    <input type="reset">
</form>
</body>
</html>

运行结果为：

代码2为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>请注册</h1>
    <span>已有账号？</span>
    <a href="#">登录</a> <br> <br>

<!--    用户注册部分-->
    <form action="">
        用户名 <input type="text" name='user' placeholder="请输入用户名"> <br>
        手机号 <select name="" id="">
        <option value="10010">10010</option>
        <option value="10086">10086</option>
    </select>
        <input type="text" name="phone" placeholder="请输入手机号"> <br>
        密&emsp;码 <input type="password" name="pwd" placeholder="请输入密码"> <br>
        验证码 <input type="text" name="yzm" placeholder="请输入验证码">
        <input type="button" value="获取验证码">
        <br>
        <input type="checkbox" value="xy">&nbsp;阅读并接受协议 <br>
        <input type="submit" value="注册">

    </form>
</div>
</body>
</html>

运行结果为：