HTML 无表格形式

Posted 2021-05-24

<form>
<label for="name">Name</label>
<input id="name" name="name"><br>
<label for="address">Address</label>
<input id="address" name="address"><br>
<label for="city">City</label>
<input id="city" name="city"><br>
</form>
 
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
 
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
 
br {
clear: left;
}

html 以表格形式浮动标签

// HTML
<form action="" autocomplete="off">
  <div class="form-item">
    <input placeholder="Name" type="text" name="email" id="name" autocomplete="off" required>
    <label for="email">Name:</label>
  </div>
  <div class="form-item">
    <input placeholder="Email" type="email" name="email" id="email" autocomplete="off">
    <label for="email">Email:</label>
  </div>
  <div class="form-item">
    <input placeholder="Subject" type="text" name="subject" id="subject" autocomplete="off">
    <label for="email">Subject:</label>
  </div>
 </form>
 
 
 
 // SCSS
 label {
  font-size:  12.5px; 
  color:  #000;
  opacity:  .8;
  font-weight:  400; 
}

form {
  padding:  40px 30px; 
  background:  #fefefe; 
  display:  flex; 
  flex-direction:  column;
  align-items:  flex-start; 
  padding-bottom:  20px; 
  width:  300px; 
}

input {
  font-size:  16px; 
  padding:  20px 0px; 
  height:  56px; 
  border:  none; 
  border-bottom:  solid 1px rgba(0,0,0,.1); 
  background:  #fff; 
  width:  280px; 
  box-sizing:  border-box; 
  transition:  all .3s linear; 
  color:  #000; 
  font-weight:  400;
  -webkit-appearance:  none;
  
  &:focus {
    border-bottom:  solid 1px rgb(182,157,230); 
    outline: 0; 
    box-shadow:  0 2px 6px -8px rgba(rgb(182,157,230), .45);
  }
}

.form-item {
  position:  relative; 
  margin-bottom:  10px;
  width:  100%;
  
  label {
    position:  absolute; 
    top: calc(50% - 7px);
    left:  0; 
    opacity:  0; 
    transition:  all .3s ease; 
    padding-left:  44px; 
  }
  
  input, textarea {
    width:  calc(100% - 44px); 
    margin-left:  auto;
    display:  flex; 
  }
  
  input:not(:placeholder-shown) {
    padding:  28px 0px 12px 0px; 
  }
  
  input:not(:placeholder-shown) + label {
    transform:  translateY(-10px); 
    opacity:  .7; 
  }
}