Cara membuat kotak input pada bahagian hadapan web

Dalam pembangunan bahagian hadapan web, kotak input ialah komponen asas yang digunakan untuk pengguna memasukkan teks, nombor dan bentuk data lain. Dalam artikel ini, kami akan meneroka cara bahagian hadapan web melaksanakan kotak input.

1. HTML

Pertama, kita perlu menggunakan tag HTML untuk mentakrifkan kotak input. Dalam HTML, teg yang biasa digunakan termasuk <input>, <textarea> dan <form>, dsb. Teg

<input> digunakan untuk membuat kotak input satu baris, contohnya:

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

Dalam dua baris pertama kod di atas, teg <label> digunakan untuk menambah penerangan pada kotak input, forNilai atribut hendaklah sama dengan nilai atribut <input> teg id. Dengan cara ini apabila pengguna mengklik pada label, kotak input akan mendapat fokus. Dalam baris ketiga kod, nilai atribut type ialah "teks", yang bermaksud bahawa kami sedang mencipta kotak input teks. Teg

<textarea> digunakan untuk membuat kotak input berbilang baris, contohnya:

<label for="comments">留言：</label>
<textarea id="comments" name="comments"></textarea>

Berbanding dengan teg <input>, kawasan boleh diedit <textarea> tag adalah lebih besar dan boleh Ia memegang berbilang baris teks. Anda juga boleh menambah teg penerangan untuk memberikan pengguna pengalaman pengendalian yang lebih baik. Teg

<form> ialah bekas yang mengandungi set item input dan butang hantar. Contohnya:

<form action="login.php" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <button type="submit">登录</button>
</form>

Dalam kod di atas, atribut <form> dan action bagi teg method digunakan untuk menentukan URL dan kaedah yang diserahkan. Teg <button> digunakan untuk membuat butang hantar Apabila pengguna mengklik butang, data borang diserahkan kepada pelayan.

2. CSS

Kelebihan menggunakan tag HTML standard untuk mencipta kotak input ialah kita boleh menggunakan CSS untuk mengawal gaya kotak input untuk mencapai pengalaman pengguna yang lebih baik . Sebagai contoh, kod berikut boleh menjadikan kotak input menyesuaikan diri dengan lebar elemen induk dan meningkatkan keindahan:

input[type="text"], textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: none;
}

Dalam kod di atas, atribut box-sizing digunakan untuk mengawal saiz kotak input, dan atribut padding digunakan Untuk mengawal padding, atribut border digunakan untuk mengawal gaya sempadan, atribut border-radius digunakan untuk mengawal sudut pembulatan sempadan dan atribut resize digunakan untuk mengawal sama ada kotak input boleh diubah saiznya.

Selain atribut di atas, kami juga boleh menggunakan CSS untuk mencapai kesan animasi kotak input, seperti berikut:

input[type="text"]:focus,
textarea:focus {
  border-color: #666;
  outline: none;
  box-shadow: 0 0 10px #ccc;
}

Apabila pengguna mengklik kotak input, perkara di atas kod akan membuat kotak input Menghasilkan perubahan warna sempadan dan kesan animasi ringkas. Penambahan gaya ini akan menjadikan tapak anda lebih menarik dan meningkatkan penglibatan pengguna.

3. JavaScript

Akhir sekali, kami boleh menggunakan JavaScript untuk melaksanakan pengesahan kotak input, gesaan dan kesan interaktif yang lain. Contohnya:

const usernameInput = document.querySelector('#username');
const passwordInput = document.querySelector('#password');

usernameInput.addEventListener('input', () => {
  const value = usernameInput.value.trim();

  if (value === '') {
    usernameInput.setCustomValidity('用户名不能为空！');
  } else {
    usernameInput.setCustomValidity('');
  }

  usernameInput.reportValidity();
});

passwordInput.addEventListener('input', () => {
  const value = passwordInput.value;

  if (value.length < 6 || value.length > 12) {
    passwordInput.setCustomValidity('密码长度必须在6-12个字符之间！');
  } else {
    passwordInput.setCustomValidity('');
  }

  passwordInput.reportValidity();
});

Dalam kod di atas, kami menggunakan kaedah EventTarget.addEventListener() untuk menambah pendengar acara input pada kotak input. Setiap kali pengguna memasukkan sesuatu dalam kotak input, pendengar ini akan dicetuskan dan kami boleh melakukan beberapa operasi pengesahan di dalamnya, seperti menyemak sama ada input kosong, sama ada panjang memenuhi keperluan, dsb. Gunakan kaedah setCustomValidity() untuk menetapkan maklumat gesaan tersuai dan gunakan kaedah reportValidity() untuk muncul kotak gesaan.

Selain pengesahan, kami juga boleh melaksanakan fungsi lain seperti carian dan perkaitan dalam kotak input dalam JavaScript, seperti:

const searchBox = document.querySelector('#search-box');
const searchResults = document.querySelector('#search-results');

searchBox.addEventListener('input', () => {
  const value = searchBox.value.trim();

  if (value === '') {
    searchResults.innerHTML = '';
    return;
  }

  // 发送搜索请求
  fetch(`/api/search?q=${value}`)
    .then(response => response.json())
    .then(results => {
      // 展示搜索结果
      searchResults.innerHTML = '';
      for (let i = 0; i < results.length; i++) {
        const item = document.createElement(&#39;li&#39;);
        item.textContent = results[i].title;
        searchResults.appendChild(item);
      }
    })
    .catch(err => {
      console.error(err);
      searchResults.innerHTML = '搜索失败！';
    });
});

Dalam kod di atas, kami menggunakan Fetch API, Permintaan carian dimulakan ke pelayan, hasil carian diproses dalam fungsi panggil balik, dan hasilnya dipaparkan pada halaman.

Ringkasan

Dalam artikel ini, kami meneroka cara bahagian hadapan web melaksanakan kotak input. Kami menggunakan teg HTML untuk mencipta kotak input, menggunakan CSS untuk mengawal gaya kotak input dan menggunakan JavaScript untuk melaksanakan pengesahan, gesaan dan kesan interaktif lain bagi kotak input. Semoga artikel ini dapat membantu anda!

Atas ialah kandungan terperinci Cara membuat kotak input pada bahagian hadapan web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!