quiz
quiz copied to clipboard
Published
20 hours ago •
zhangxinxu
zhangxinxu
CSS基础测试3-HTML测试
本期题目实际上是HTML基础测试，内容如下图：
大家的HTML代码注意顶边缩进，github自带代码高亮，可以使用下面的格式：
```html <!-- 你的html代码在这里 --> ```
<div class="login-box">
<div class="login-title">登录</div>
<div class="login-body">
<div class="account">
<input type="text" class="account-input" placeholder="账号/手机">
</div>
<div class="password">
<input type="password" class="password-input" placeholder="密码">
<span class="fogort-password">忘记密码</span>
</div>
<div class="captcha">
<input type="text" class="captcha-input" placeholder="验证码">
<img src="" alt="验证码" class="captcha-img">
</div>
<button class="login-btn">登录</button>
<a href="http://" target="_blank" rel="">立即注册</a>
</div>
</div>
<form>
<header class="header">
登錄
</header>
<section>
<div class="form-item">
<input type="text" placeholder="賬號/手機" name="username">
</div>
<div class="form-item">
<input type="password" placeholder="密碼" name="password">
<a href="javascript:;">忘記密碼？</a>
</div>
<div class="form-item">
<input type="text" placeholder="驗證碼" name="code">
<img src="" alt="">
</div>
</section>
<footer>
<button>登錄</button>
<a href="javascript:;">立即註冊</a>
</footer>
</form>
如果使用原生的表单提交可以像下面这样 如果使用ajax主动发请求可能就不需要注意那么多了
<form action="" method="post">
<h3>登录</h3>
<div>
<p>
<input placeholder="账号/手机" name="user" type="text">
</p>
<p>
<input placeholder="密码" name="password" type="password">
<a href="">忘记密码</a>
</p>
<p>
<input placeholder="验证码" name="captcha" type="text">
<img alt="验证码" src="">
</p>
<button type="submit">登录</button>
<a href="">立即注册</a>
</div>
</form>
<form action="/" method="POST">
<div>
<h1>登录</h1>
</div>
<div>
<div>
<input name="username" type="text" placeholder="账号/手机">
</div>
<div>
<input name="password" type="password" placeholder="密码">
<a href="/recovery">忘记密码</a>
</div>
<div>
<input name="validate_code" type="text" placeholder="验证码">
<button>
<img src="" alt="点击更新验证码">
</button>
</div>
</div>
<div>
<input type="submit" value="登录">
<a href="/register">立即注册</a>
</div>
</form>
<div class="login-panel">
<div class="login">登录</div>
<div class="login-form">
<form action="" method="post">
<div class="form-group">
<input type="text" name="username" placeholder="账号/手机">
<a href="#">忘记密码？</a>
</div>
<div class="form-group">
<input type="password" name="password" placeholder="验证码">
<img src="#" alt="验证码">
</div>
<div class="form-group">
<input type="submit" value="登录">
</div>
<div>
<a href="#">立即注册</a>
</div>
</form>
</div>
</div>
- 可以根据添加autocomplete
- 设置第一个输入框autofocus，方便用户进行输入
- required可以使用表单默认的校验提示
<form action="">
<h3>登录</h3>
<div>
<input required type="text" placeholder="账户/手机" autocomplete="off" autofocus>
</div>
<div>
<input required type="password" placeholder="密码" autocomplete="off"><a href="/forget">忘记密码？</a>
</div>
<div>
<input required type="text" placeholder="验证码"><img src="" alt="验证码">
</div>
<div>
<button type="submit">登录</button>
</div>
<div>
<a href='/reg'>立即注册</a>
</div>
</form>
<form id="login-form">
<header class="title">
<h1>登录</h1>
</header>
<section class="input">
<div class="account">
<input type="text" name="account" placeholder="账号/手机">
</div>
<div class="password">
<input type="password" name="password" placeholder="密码">
<a href="xxx">忘记密码？</a>
</div>
<div class="verification-code">
<input type="text" name="verification_code" placeholder="验证码">
<img src="xxx" alt="Verification Code">
</div>
<button class="submit">登录</button>
</section>
<footer class="register">
<a href="xxx">立即注册</a>
</footer>
</form>
写完看了下楼上的，发现我的好low，代码也好多…… 张老师可否帮看看有哪些不好的地方
<form action="" method="post">
<div class="login-title">
<h2>登录</h2>
</div>
<div class="login-body">
<div class="userAccount">
<input type="text" placeholder="账号/手机" name="userAccount">
</div>
<div class="password">
<input type="password" placeholder="密码" name="password">
<p>
<span>|</span>
<a href="">忘记密码?</a>
</p>
</div>
<div class="checkCode">
<input type="text" placeholder="验证码" name="checkCode">
<img src="" title="点击更换图片">
</div>
</div>
<div class="login-footer">
<button type="button">登陆</button>
<a href="">立即注册</a>
</div>
</form>
<div
class="modal"
>
<div
class="modal-title"
>
登录
</div>
<div
class="modal-content"
>
<form
class="form"
>
<div
class="field"
>
<input
placeholder="账号/手机"
/>
</div>
<div
class="field"
>
<input
placeholder="密码"
/>
<span
class="forget"
>
忘记密码
</span>
</div>
<div
class="field"
>
<input
placeholder="验证码"
/>
<img
src="abc?t=1234"
/>
</div>
</form>
</div>
<div
class="modal-footer"
>
<a
class="login"
>
登录
</a>
<a
class="register"
>
立即注册
</a>
</div>
</div>
<div>
<div>
<h3>登录</h3>
</div>
<div>
<div>
<div>账号/手机</div>
<div contenteditable="true"></div>
</div>
<div>
<div>密码</div>
<div contenteditable="true"></div>
<div>忘记密码</div>
</div>
<div>
<div>验证码</div>
<div contenteditable="true"></div>
<img src="" alt=""/>
</div>
<div>
<button type="submit">登录</button>
</div>
<div>
<a href="#">立即注册</a>
</div>
</div>
</div>
<div class="login-box">
<div class="lb-title">登录</div>
<div class="login-body">
<div class="login-account">
<div class="input-wrapper">
<input type="text" placeholder="账号/手机">
</div>
</div>
<div class="login-pwd">
<div class="input-wrapper">
<input type="password" placeholder="密码">
</div>
<button>忘记密码</button>
</div>
<div class="login-code">
<div class="input-wrapper">
<input type="text" placeholder="验证码">
</div>
<img src="#" alt="图形验证码">
</div>
<button>登录</button>
<a href="javascript:;">立即注册</a>
</div>
</div>
<div class="login">
<div class="login_title"></div>
<div class="login_body">
<div>
<input type="text" placeholder="账号/手机">
</div>
<div>
<span>
<input type="password" placeholder="密码">
</span>
<span>
<a href="#">|忘记密码?</a>
</span>
</div>
<div>
<input type="text" placeholder="验证码">
<img src="img" alt="验证码" class="capth">
</div>
<div>
<button>登录</button>
<a href="#">立即注册</a>
</div>
</div>
</div>
<div class="login">
<p class="title">登陆</p>
<div class="content">
<ul>
<li>
<input type="text" placeholder="账号/手机">
</li>
<li>
<input type="password" placeholder="密码">
<span>忘记密码</span>
</li>
<li>
<input type="text" placeholder="验证码">
<span class="testCode"></span>
</li>
</ul>
<div class="loginBtn">登陆</div>
<a href="" class="signIn">立即注册</a>
</div>
</div>
<form action="#" name="login">
<fieldset>
<legend>登录</legend>
<input type="text" placeholder="帐号/手机" name="account" >
<p>
<input type="password" placeholder="密码" name="password" >
<span>忘记密码</span>
</p>
<input type="text" placeholder="验证码" name="code" >
<img src="" alt="点击刷新">
<input type="submit" value="提交">
<a href="#" titile="注册">立即注册</a>
</fieldset>
</form>
<div id="Signin">
<!-- 头部信息 -->
<div class="signTop">
登录
</div>
<div class="Sign">
<!-- 账号 -->
<div class="Sign-account">
<input type="text" name="account" placeholder="账号/手机">
</div>
<!-- 密码 -->
<div class="Sign-password">
<input type="password" name="password" placeholder="密码">
<button>忘记密码</button>
</div>
<!-- 验证码 -->
<div class="Sign-verify">
<input type="text" name="">
<div>
</div>
</div>
<!-- 登录button -->
<div class="Sign-Button">
<button>登录</button>
</div>
<!-- 注册 -->
<div class="Sign-login">
<p>立即注册</p>
</div>
</div>
</div>
<form action="">
<h1>登录</h1>
<input class="input" type="text" placeholder="账号/手机号">
<hr>
<input class="input" type="text" placeholder="密码">
<a class="forget" href="">忘记密码</a>
<hr>
<input class="input" type="text" placeholder="验证码">
<a class="code" href="#"><img src="" alt=""></a>
<hr>
<button class="btn_login">登录</button>
<button class="btn_reg">立即注册</button>
</form>
<div class="login">
<h3 class="title">登录</h3>
<form class="form">
<input type="text" class="user" placeholder="账号/手机" name="user">
<div class="psw">
<input type="password" placeholder="密码" name="psw">
<span class="forget">忘记密码</span>
</div>
<div class="code">
<input type="text" placeholder="验证码" name="code">
<img src="" alt="验证码">
</div>
<button class="btn" @click="login">登录</button>
</form>
<a href="#">立即注册</a>
</div>
<div class="login">
<div class="head">登录</div>
<form>
<div class="input-item">
<input type="text" name="account" placeholder="账号/手机">
</div>
<div class="input-item">
<input type="password" name="password" placeholder="密码">
<a href="#">忘记密码？</a>
</div>
<div class="input-item">
<input type="number" name="code" placeholder="验证码">
<img class="code" src="" alt="">
</div>
<button type="submit">登录</button>
<a href="#">立即注册</a>
</form>
</div>
<div class="panel login-box">
<div class="panel-head">
<h3 class="panel-title">登录</h3>
</div>
<div class="panel-body">
<form id="loginForm">
<div class="form-group">
<input type="text" class="form-input" placeholder="账号/手机" autofocus required>
</div>
<div class="form-group">
<div class="input-group">
<input type="password" class="form-input" placeholder="密码" required>
<a href="..." class="input-group-addon">忘记密码？</a>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-input" placeholder="验证码" autocomplete="off" required>
<a href="..." class="input-group-addon">
<img src="..." alt="验证码" id="validCode" width="86" height="28">
</a>
</div>
</div>
<p id="tipMsg"> </p>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">登录</button>
<a href="..." class="btn btn-link btn-block">立即注册</a>
</div>
</form>
</div>
</div>
<div>
<p>登录</p>
<form>
<input type="text" placeholder="账号/手机" name="account"><br/>
<input type="password" name="pwd" id="password" placeholder="密码">
<a href="">| 忘记密码？</a><br>
<input type="text" placeholder="验证码"><img src="" alt="验证码"><br>
<input type="submit" value="登录"><br>
<a href="">立即注册</a>
</form>
</div>
- <form> + submit
- <fieldset> + <legend>
- placeholder
- name
- required验证
- autocomplete="off"
- tabindex/autofocus
- type="text"可以缺省
- 忘记密码，立即注册最好使用<a>