CSS基础测试3-HTML测试

zhangxinxu commented 5 years ago

本期题目实际上是HTML基础测试，内容如下图：

大家的HTML代码注意顶边缩进，github自带代码高亮，可以使用下面的格式：

```html
<!-- 你的html代码在这里 -->
```

frankyeyq commented 5 years ago

<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>

ximi137 commented 5 years ago

<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>

XboxYan commented 5 years ago

如果使用原生的表单提交可以像下面这样如果使用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>

ghost commented 5 years ago

    <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>

ylfeng250 commented 5 years ago

  <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>

silverWolf818 commented 5 years ago

可以根据添加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>

notzheng commented 5 years ago

    <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>

Object-oriented commented 5 years ago

写完看了下楼上的，发现我的好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>

liyongleihf2006 commented 5 years ago

<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>

NeilChen4698 commented 5 years ago

<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>

lineforone commented 5 years ago

<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>

wangyangyangyang commented 5 years ago

  <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>

smileyby commented 5 years ago

<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>

Fatty-Shu commented 5 years ago

<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>

YuanChaobo commented 5 years ago

        <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>

Sunday-web commented 5 years ago

    <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>

loknum commented 5 years ago

<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>

JaimeCheng commented 5 years ago

<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>

wingmeng commented 5 years ago

<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">&nbsp;</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>

tao1874 commented 5 years ago

     <div>
        <p>登录</p>
        <form>
            <input type="text" placeholder="账号/手机" name="account"><br/>
            <input type="password" name="pwd" id="password" placeholder="密码">
            <a href="">| &nbsp;忘记密码？</a><br>
            <input type="text" placeholder="验证码"><img src="" alt="验证码"><br>
            <input type="submit" value="登录"><br>
            <a href="">立即注册</a>
        </form>
    </div>

zhangxinxu commented 5 years ago

<form> + submit
<fieldset> + <legend>
placeholder
name
required验证
autocomplete="off"
tabindex/autofocus
type="text"可以缺省
忘记密码，立即注册最好使用<a>

zhangxinxu / quiz

CSS基础测试3-HTML测试 #10