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

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

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

HTML 使用表單標籤實現註冊頁面的例項程式碼
2018-12-03
HTML
直播軟體app開發，HTML和CSS分別實現註冊頁面表單
2023-01-31
APPHTMLCSS
直播電商平臺開發，HTML和CSS分別實現註冊頁面表單
2022-12-13
HTMLCSS
『手寫Mybatis』實現對映器的註冊和使用
2024-06-16
MyBatis
Android需求之RxJava2實現表單校驗(註冊登入)
2020-11-13
AndroidRxJava
mvc架構的簡單實踐----使用者註冊的實現
2024-11-04
MVC架構
成品直播原始碼推薦，登入和註冊兩個頁面的簡單實現
2022-04-01
原始碼
HTML基礎實現簡單的註冊和登入頁面
2020-12-14
HTML
用 etcd 實現服務註冊和發現
2019-11-29
jQuery Validate表單驗證(使用者註冊簡單應用)
2018-04-16
jQuery
使用JS實現一個簡單的選項卡效果
2020-01-11
JS
Dubbo+Nacos實現服務註冊和發現
2020-08-14
服務註冊與發現的原理和實現
2021-09-12
利用JavaScript實現註冊頁面省市聯動效果（附程式碼）
2018-11-23
JavaScript
node+express+mongDB實現簡單登入註冊
2019-02-16
Express
Laravel 實現 passport 使用者註冊登入
2020-04-10
LaravelPassport
AspectCore和MSDI 實現Name註冊以及解析物件
2023-04-23
物件
Laravel6 簡單使用 API 註冊訪問實現（適合菜鳥）
2019-10-22
LaravelAPI
nacos實現Java和.NetCore的服務註冊和呼叫
2023-03-11
JavaNetCore
巧妙利用 iframe，實現和 Ajax 一樣的非同步提交表單效果
2019-06-14
非同步
實現類的註冊方法
2024-04-21
flutter - 圖文講解表單元件基本使用 & 註冊實戰
2019-10-28
Flutter元件
html+JS+php實現簡單的註冊使用者名稱驗證
2018-09-29
HTMLJSPHP
前端利用ajax實現使用者註冊頁面
2020-08-18
前端
Spartacus 註冊和登入頁面的實現細節
2022-09-17
10.註冊和登入功能實現（3）—— 註冊資料寫入資料庫
2019-02-16
資料庫
Zookeeper實現服務註冊/發現
2020-06-09
簡單登入註冊實現（Java物件導向複習）
2019-03-28
Java物件
從零開始實現簡單 RPC 框架 4：註冊中心
2021-08-24
RPC框架
簡單實現一個全面屏切換效果
2018-09-18
使用redis完成註冊和登入
2018-12-05
Redis
Rpc-實現Zookeeper註冊中心
2023-02-17
RPC
Abp 實現通過手機號註冊使用者
2022-04-11
【Spring註解開發】元件註冊-使用@Configuration和@Bean給容器中註冊元件
2020-06-05
Spring元件Bean
動態註冊和靜態註冊
2018-05-21
Eureka實現服務註冊與發現
2018-07-28
實現etcd服務註冊與發現
2022-08-25
使用easy poi註解實現二級表頭
2020-12-14

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

相關文章