Cara membuat borang dengan gesaan terapung menggunakan HTML, CSS dan jQuery

Cara membuat borang dengan gesaan terapung menggunakan HTML, CSS dan jQuery

Dalam reka bentuk web moden, borang adalah salah satu komponen yang sangat diperlukan. Untuk meningkatkan pengalaman pengguna, kami selalunya perlu menambahkan beberapa gesaan terapung pada borang untuk membimbing pengguna mengisi borang dengan betul. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencipta borang dengan gesaan terapung dan memberikan contoh kod khusus.

Pertama, kita perlu mencipta borang HTML. Dalam borang, kami perlu menambah beberapa medan input, serta label yang sepadan dan maklumat segera.

<form id="myForm">
  <div class="form-group">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name">
    <span class="tooltip">请输入您的姓名</span>
  </div>
  
  <div class="form-group">
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email">
    <span class="tooltip">请输入有效的邮箱地址</span>
  </div>
  
  <div class="form-group">
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
    <span class="tooltip">密码长度应为6-12位</span>
  </div>
  
  <button type="submit">提交</button>
</form>

Seterusnya, kita perlu menggunakan CSS untuk mentakrifkan gaya dan susun atur borang serta menambah gaya pada gesaan terapung.

.form-group {
  position: relative;
  margin-bottom: 20px;
}

.tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #eee;
  padding: 5px;
  display: none;
}

.tooltip::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #eee transparent;
}

.tooltip::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -3px;
  border-width: 3px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}

Dalam kod di atas, kami menambahkan kelas "kumpulan-bentuk" yang agak berkedudukan pada elemen induk bagi setiap medan input dalam borang. Kami kemudiannya mentakrifkan "petua alat" kelas yang diletakkan secara mutlak untuk hujung terapung. Gunakan "display: none;" untuk membuat gesaan tidak kelihatan pada mulanya dan tambahkan beberapa pengubahsuaian pada gaya gesaan.

Akhir sekali, kita perlu menggunakan jQuery untuk melaksanakan fungsi memaparkan petua terapung apabila pengguna menuding tetikus di atas medan input.

$(document).ready(function() {
  $('input').on('mouseover', function() {
    $(this).next('.tooltip').fadeIn();
  });
  
  $('input').on('mouseout', function() {
    $(this).next('.tooltip').fadeOut();
  });
  
  $('#myForm').on('submit', function() {
    // 表单验证逻辑
    if ($('input#name').val() === '') {
      $('input#name').next('.tooltip').fadeIn();
      return false;
    }
    
    if ($('input#email').val() === '') {
      $('input#email').next('.tooltip').fadeIn();
      return false;
    }
    
    // 其他表单验证逻辑
    
    return true;
  });
});

Dalam kod di atas, apabila pengguna menuding tetikus di atas medan input, kami menggunakan kaedah "fadeIn()" untuk memaparkan gesaan terapung yang sepadan. Kami menggunakan kaedah "fadeOut()" untuk menyembunyikan hujung terapung apabila tetikus bergerak keluar dari medan input. Selain itu, apabila borang diserahkan, kami boleh menambah logik pengesahan borang seperti yang diperlukan dan memaparkan gesaan terapung yang sepadan apabila pengesahan gagal.

Dengan kod HTML, CSS dan jQuery di atas, kami berjaya mencipta borang dengan gesaan terapung. Apabila pengguna mengisi borang, mereka boleh mendapatkan maklumat gesaan yang sepadan melalui gesaan terapung, yang meningkatkan pengalaman pengguna. Saya harap artikel ini membantu anda semasa membuat borang menggunakan HTML, CSS dan jQuery!

Atas ialah kandungan terperinci Cara membuat borang dengan gesaan terapung menggunakan HTML, CSS dan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!