使用float,flex和tailwind實現同一個表單註冊效果

猝死的路上發表於2024-04-20
FlexAI

float方式
html結構

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <form action="#" class="container">
    <h1>使用者註冊</h1>
    <div class="form-item">
      <input type="text" placeholder="請輸入11位手機號" class="txt"/>
    </div>

    <div class="form-item clearfix">
      <div class="left fl">
        <input type="text" placeholder="請填寫驗證碼" class="txt"/>
      </div>
      
      <button type="button" class="fr">傳送驗證碼</button>
    </div>

    <div class="form-item">
      <input type="password" placeholder="請輸入密碼" class="txt"/>
    </div>

    <div class="form-item">
      <input type="password" placeholder="請再次確認密碼" class="txt"/>
    </div>

    <div class="form-item" style="height: 100px;">
      <select multiple>
        <option>愛好1</option>
        <option>愛好2</option>
        <option>愛好3</option>
        <option>愛好4</option>
        <option>愛好5</option>
        <option>愛好6</option>
        <option>愛好7</option>
        <option>愛好8</option>
        <option>愛好9</option>
        <option>愛好10</option>
      </select>
    </div>

    <div class="form-item clearfix">
      <div class="fl title">性別</div>
      <div class="fl">
        <label class="label">
          <input type="radio" name="sex" />
          <span>男</span>
        </label>

        <label class="label">
          <input type="radio" name="sex" />
          <span>女</span>
        </label>
      </div>
    </div>

    <div class="form-item" style="height: 100px;">
      <textarea placeholder="請填寫個人簡介"></textarea>
    </div>

    <div class="form-item">
      <label>
        <input type="checkbox" />
        <span class="privacy">同意臺灣是中國領土不可分割的一部分</span>
      </label>
    </div>

    <div class="form-item clearfix">
      <button class="fl">立即註冊</button>
      <button type="reset" class="fr">重置表單</button>
    </div>
  </form>
</body>
</html>

css

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

body {
  background: #071218;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.container {
  width: 400px;
  margin: 30px auto;
  background: #fff;
  padding: 25px;
  border-radius: 10px;
  border: 1px solid #ccc;
}

.container h1 {
  text-align: center;
  margin-bottom: 25px;
}
/* //父元素只設定高度和margin */
.form-item {
  height: 35px;
  margin: 20px 0;
}

/* //邊框設定在子元素的input上 */
.form-item .txt {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 10px;
}

.form-item .left{
  width: 50%;
}

.form-item button {
  width: 45%;
  height: 40px;
  border-radius: 5px;
  border: none;
  background: #4a7ded;
  color: #fff;
}

.form-item input:focus {
  outline: 1px solid #4a7ded;
}

.form-item select {
  width: 100%;
  height: 100px;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 10px;
}

.form-item select:focus {
  outline: 1px solid #4a7ded;
}

.form-item .title {
  margin-right: 20px;
}

.form-item .label {
  padding: 10px;
}

.form-item textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  border: 1px solid #ccc;
}

.form-item textarea:focus {
  outline: 1px solid #4a7ded;
}

.form-item input[type="checkbox"] {
  outline: none;
  font-size: 12px;
}

.form-item .privacy {
  color: #ccc;
}

flex方式
html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="flexindex.css">
</head>
<body>
  <form class="container">
    <h1>使用者註冊</h1>

    <div class="form-item">
      <input type="text" class="txt" placeholder="請輸入11位手機號">
    </div>

    <div class="form-item m-flex flex-between column-gap-10">
      <input type="text" class="txt captcha-item"  placeholder="請填寫驗證碼">
      <button type="button" disabled>傳送驗證碼</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">
      <select multiple class="favorite-item">
        <option>愛好1</option>
        <option>愛好2</option>
        <option>愛好3</option>
        <option>愛好4</option>
        <option>愛好5</option>
        <option>愛好6</option>
        <option>愛好7</option>
        <option>愛好8</option>
        <option>愛好9</option>
        <option>愛好10</option>
      </select>
    </div>

    <div class="form-item m-flex item-center">
      <span class="sex-title">性別</span>

      <div>
        <label class="label">
          <input checked class="m-vertical-align" type="radio" name="sex">
          <span>男</span>
        </label>
        
        <label class="label">
          <input class="m-vertical-align"  type="radio" name="sex">
          <span>女</span>
        </label>
      </div>
    </div>

    <div class="form-item">
      <textarea class="txt profile-item"  placeholder="請填寫個人簡介"></textarea>
    </div>

    <div class="form-item">
      <label class="label">
        <input  class="m-vertical-align" type="checkbox">
        <span>同意臺灣是中國領土不可分割的一部分</span>
      </label>
    </div>

    <div class="form-item m-flex flex-center column-gap-50">
      <button disabled>立即註冊</button>
      <button type="reset">重置表單</button>
    </div>
  </form>
</body>
</html>

css

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

body {
  background: #071218;
}

.container {
  width: 400px;
  margin: 30px auto;
  padding: 30px;
  background: #fff;
  border-radius: 10px;
}

.m-flex {
  display: flex;
}

.flex-between {
  justify-content: space-between;
}

.flex-center {
  justify-content: center;
}

.column-gap-10 {
  column-gap: 10px;
}

.column-gap-50 {
  column-gap: 50px;
}
.item-center {
  align-items: center;
}


.container h1{
  text-align: center;
  margin-bottom: 30px;
}

.form-item {
  margin: 10px 0;
}

.txt {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 5px;
  border-radius: 5px;
  outline: none;
  border: 1px solid #ccc;
  font-size: 14px;
}

.txt:focus {
  border-color: #4a7ded;
}

.captcha-item {
  width: 100%;
}

button {
  width: 60%;
  height: 40px;
  background: #4a7ded;
  color: #fff;
  border-radius: 5px;
  padding: 5px 35px;
  border: 1px solid #ccc;
  outline: none;
  cursor: pointer;
  font-size: 14px;
}

.m-vertical-align {
  vertical-align: -1px;
}

button:disabled {
  background: #92ace4;
  cursor: not-allowed;
}

.favorite-item {
  width: 100%;
  height: 150px;
  padding: 5px;
  outline: none;
  border: 1px solid #ccc;
  font-size: 14px;
}

.favorite-item option {
  margin: 3px;
}

.sex-title {
  font-size: 16px;
  margin-right: 20px;
}

.label {
  font-size: 14px;
  margin-right: 5px;
}

.profile-item {
  height: 100px;
  resize: none;
}

tailwind
只有html,因為都是原子css,而且是自適應的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      prefix: 'link-',
      darkMode: 'selector',
      theme:{
        extend: {
          colors: {
            'dark':'#071218',
            'border':'#4a7ded',
            'gray':'#ccc',
            'border-disabled':'#92ace4',
          }
        }
      }
    }
  </script>
</head>
<body class="link-bg-dark">
  <form class="link-bg-white link-rounded-lg link-mx-auto link-my-5 link-w-1/4 link-p-5">
    <h1 class="link-text-center link-text-2xl link-font-bold link-mb-5">使用者註冊</h1>
    <div class="link-my-5">
      <input type="text" placeholder="請輸入11位手機號" class="focus:link-border-border link-text-sm link-px-2 link-h-10 link-w-full link-rounded-md link-border-gray link-outline-none link-border" />
    </div>

    <div class="link-flex link-justify-between link-my-5">
      <input type="text" placeholder="請輸入驗證碼" class="focus:link-border-border link-text-sm link-px-2 link-h-10 link-w-40 link-rounded-md link-border-gray link-outline-none link-border" />
      <button type="button" disabled class="link-cursor-pointer disabled:link-cursor-not-allowed disabled:link-bg-border-disabled link-rounded-md link-h-10 link-bg-border link-text-white link-px-10 link-py-2">傳送驗證碼</button>
    </div>

    <div class="link-my-5">
      <input type="password" placeholder="請輸入密碼" class="focus:link-border-border link-text-sm link-px-2 link-h-10 link-w-full link-rounded-md link-border-gray link-outline-none link-border" >
    </div>

    <div class="link-my-5">
      <input type="password" placeholder="請再次輸入密碼" class="focus:link-border-border link-px-2 link-text-sm 
      link-h-10 link-w-full link-rounded-md link-border-gray link-outline-none link-border" >
    </div>

    <div class="link-my-5">
      <select multiple class="link-w-full link-h-40 link-p-2 focus:link-border-border link-border link-border-gray link-outline-none">
        <option class="link-m-1 link-text-sm">愛好1</option>
        <option class="link-m-1 link-text-sm">愛好2</option>
        <option class="link-m-1 link-text-sm">愛好3</option>
        <option class="link-m-1 link-text-sm">愛好4</option>
        <option class="link-m-1 link-text-sm">愛好5</option>
        <option class="link-m-1 link-text-sm">愛好6</option>
        <option class="link-m-1 link-text-sm">愛好7</option>
        <option class="link-m-1 link-text-sm">愛好8</option>
        <option class="link-m-1 link-text-sm">愛好9</option>
        <option class="link-m-1 link-text-sm">愛好10</option>
      </select> 
    </div>

    <div class="link-my-5 link-flex link-items-center">
      <span class="link-mr-5">性別</span>
      <div>
        <label class="link-mr-2">
          <input type="radio" checked name="sex" class="link-align-middle">
          <span class="link-text-sm">男</span>
        </label>

        <label>
          <input type="radio" name="sex" class="link-align-middle">
          <span class="link-text-sm">女</span>
        </label>
      </div>
    </div>

    <div class="link-my-5">
      <textarea placeholder="請輸入個人簡介" class="focus:link-border-border link-w-full link-resize-none link-h-24 link-border link-border-gray"></textarea>
    </div>

    <div class="link-my-5">
      <label>
        <input type="checkbox" class="link-align-middle"/>
        <span class="link-text-sm">同意臺灣是中國領土不可分割的一部分</span>
      </label>
    </div>

    <div class="link-my-5 link-flex link-justify-between">
      <button disabled class="link-cursor-pointer link-w-40 disabled:link-cursor-not-allowed disabled:link-bg-border-disabled link-rounded-md link-h-10 link-bg-border link-text-white link-px-10 link-py-2">立即註冊</button>
      <button type="reset" class="link-cursor-pointer link-w-40 disabled:link-cursor-not-allowed disabled:link-bg-border-disabled link-rounded-md link-h-10 link-bg-border link-text-white link-px-10 link-py-2">重置表單</button>
    </div>
  </form>
</body>
</html>

感覺小專案還是使用float或者flex

相關文章