2 min read

contact 表單設計

Table of Contents

上週逛 awwwards,看到這個網站的表單設計得不錯,手癢也來仿作了一個。

利用 Javascript,我在使用者輸入資料後(偵測到oninput事件時),動態加上valueattribute,並且配合 CSS(input[value]:invalid),來判斷使用者輸入的資料是否符合規則,如果不符合規則可以及時反應(字變紅),減少使用者輸入表單的難度。

以下提供程式碼:

See the Pen Simple input box design by Rex Tsou (@akccakcctw) on CodePen.

HTML

<form action="#" class="form-container" method="post">
  <div class="input-container">
    <input id="name" name="name" type="text" required>
    <label for="name">name</label>
  </div>
  <div class="input-container">
    <input id="email" name="email" type="email" required>
    <label for="name">email</label>
  </div>
  <div class="input-container">
    <textarea id="massage" name="massage" cols="20" rows="5" required></textarea>
    <label for="name">massage</label>
  </div>
  <div id="sent-container" class="input-container sent-wrap">
    <input id="sent" type="submit" value="SENT">
  </div>
</form>

CSS

@mixin trans-time($time:0.5s){
  transition: all $time cubic-bezier(0.2, 0.8, 0.25, 1 );
}
%sent-hover{
  cursor: pointer;
  @include trans-time(1s);
}
*{
    outline: none;
}

html,
body {
    height: 100%;
    margin: 0;
} 

body {
    background: black;
    color: white;
    font-family: monospace;
}   
.form-container {
    margin: 30px 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
    
.input-container {
    position: relative;
    margin-top: 2em;
    width: 250px;
}
input,
textarea {
    position: relative;
    width: 100%;
    padding: 6px 0;
    line-height: 160%;
    font-size: 14px;
    background: none;
    color: white;
    border: none;
    border-bottom: 1px solid #aaa;
    }

label {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 14px;
    line-height: 14px;
    padding: 6px 0;
    text-transform: uppercase;
    @include trans-time(0.5s);
}

input:focus+label,
input:valid+label,
textarea:focus+label,
textarea:valid+label {
    transform: translateX(-4.5em);
    opacity: 0.5;
}

input[value]:invalid+label,
textarea[value]:invalid+label{
  color:red;
  transform: translateX(-4.5em);
  opacity:0.5;
}

.sent-wrap{
    @extend %sent-hover;
    #sent{
        @extend %sent-hover;
        z-index: 2;
    }
    &:after{
        content: "CLICK!";
        line-height: 34px;
        position: absolute;
        text-align: center;
        color: black;
        opacity: 0;
        top: 0;
        left: 0;
        height: 100%;
        background: white;
        @include trans-time(0.5s);
        width: 100%;
    
    }
    &:hover{
        #sent{
           opacity: 0;
        }
        &:after{
           opacity: 1;
        }
      }
}

JS

$("input, textarea").on('input',function(){
  this.setAttribute('value', this.value);
});

參考資料