HTML表单

转角羊儿

已于 2022-06-19 15:55:59 修改

阅读量75

点赞数

分类专栏： HTML CSS 网页文章标签： html css css3

于 2022-06-19 15:55:35 首次发布

本文链接：https://blog.csdn.net/qq_41988669/article/details/125358656

版权

CSS 同时被 3 个专栏收录

12 篇文章 1 订阅

订阅专栏

HTML

11 篇文章 0 订阅

订阅专栏

网页

8 篇文章 0 订阅

订阅专栏

文章目录

CSS样式部份

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #081620;
  color: #333;
}

.container {
  width: 400px;
  background: #fff;
  margin: 30px auto;
  padding: 30px;
  border-radius: 10px;
}
.container h1 {
  margin-bottom: 30px;
  text-align: center;
}
.container .form-item {
  margin: 16px 0;
}
.container .txt,
select {
  outline: none;
  width: 100%;
  height: 40px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}
select {
  height: 100px;
}
.container textarea.txt {
  resize: none;
  height: 100px;
}
.container .txt:focus,
select:focus {
  border-color: #5589ef;
}

button {
  outline: none;
  border: none;
  background: #5589ef;
  color: #fff;
  width: 150px;
  height: 40px;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background: #739cee;
}
button:disabled {
  background: #c8d6f5;
  cursor: not-allowed;
}
label {
  cursor: pointer;
}
.captcha .txt {
  width: 160px;
}
.left {
  float: left;
}
.right {
  float: right;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.container .title {
  margin-right: 20px;
}

.policy {
  font-size: 12px;
}
.policy span {
  vertical-align: 2px;
}
input ~ span {
  color: #aaa;
}
input:checked ~ span {
  color: #333;
}

HTML样式部份

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户注册</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <form class="container">
      <h1>用户注册</h1>
      <div class="form-item">
        <input
          type="text"
          class="txt"
          maxlength="11"
          placeholder="请输入11位手机号"
        />
      </div>
      <div class="form-item captcha clearfix">
        <input class="left txt" type="text" placeholder="请填写验证码" />
        <button class="right" type="button">发送验证码</button>
      </div>
      <div class="form-item">
        <input type="password" class="txt" placeholder="请输入密码" />
      </div>
      <div class="form-item">
        <input type="password" class="txt" placeholder="请再次确认密码" />
      </div>
      <div class="form-item clearfix">
        <select multiple>
          <option value="">爱好1</option>
          <option value="">爱好2</option>
          <option value="">爱好3</option>
          <option value="">爱好4</option>
          <option value="">爱好5</option>
          <option value="">爱好6</option>
          <option value="">爱好7</option>
          <option value="">爱好8</option>
          <option value="">爱好9</option>
          <option value="">爱好10</option>
        </select>
      </div>
      <div class="form-item clearfix">
        <div class="left title">性别</div>
        <div class="left">
          <label>
            <input type="radio" name="sex" checked />
            <span>男</span>
          </label>
          <label>
            <input type="radio" name="sex" />
            <span>女</span>
          </label>
        </div>
      </div>
      <div class="form-item">
        <textarea class="txt" placeholder="请填写个人简介"></textarea>
      </div>
      <div class="form-item policy">
        <label>
          <input type="checkbox" />
          <span>同意台湾是中国领土不可分割的一部分</span>
        </label>
      </div>
      <div class="form-item clearfix">
        <button type="submit" class="left">立即注册</button>
        <button type="reset" class="right">重置表单</button>
      </div>
    </form>
  </body>
</html>