So erstellen Sie ein Eingabefeld im Web-Frontend

Bei der Web-Frontend-Entwicklung ist das Eingabefeld eine grundlegende Komponente, mit der Benutzer Text, Zahlen und andere Datenformen eingeben können. In diesem Artikel werden wir untersuchen, wie das Web-Frontend Eingabefelder implementiert.

1. HTML

Zuerst müssen wir HTML-Tags verwenden, um das Eingabefeld zu definieren. Zu den in HTML häufig verwendeten Tags gehören <input>, <textarea> und <form> usw. <input>，<textarea>和<form>等等。

<input>标记用于创建单行输入框，例如：

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

上面的前两行代码中，<label>标记用于为输入框添加描述，for属性的值应该和<input>标记的id属性值相同。这样在用户单击标签时，输入框就会获得焦点。第三行代码中，type属性的值为"text"，表示我们创建的是一个文本输入框。

<textarea>标记用于创建多行输入框，例如：

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

相比于<input>标记，<textarea>标记的可编辑区域更大，可以在其中容纳多行文本。同样可以添加描述标签，为用户提供更好的操作体验。

<form>标记是一个容器，包含了一组输入项和一个提交按钮。例如：

<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>

上面的代码中，<form>标记的action和method属性用于指定提交的URL和方法。<button>标记用于创建提交按钮，当用户单击按钮时，表单的数据就会被提交到服务器。

2. CSS

使用标准的HTML标记创建输入框的好处在于，我们可以使用CSS来控制输入框的样式，实现更好的用户体验。例如，以下代码可以让输入框自适应父元素的宽度，增加美观程度：

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

上面的代码中，box-sizing属性用于控制输入框的尺寸，padding属性用于控制内边距，border属性用于控制边框样式，border-radius属性用于控制边框圆角度数，resize属性用于控制输入框是否可以调整大小。

除了以上属性外，我们还可以使用CSS实现输入框的动画效果，如下：

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

当用户单击输入框时，上面的代码将会让输入框产生边框颜色的变化和简短的动画效果。这些样式的添加将会让您的站点更具吸引力，增加用户的参与度。

3. JavaScript

最后，我们可以使用JavaScript来实现输入框的验证、提示以及其他一些交互效果。例如：

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();
});

上面的代码中，我们使用了EventTarget.addEventListener()方法，来为输入框添加了一个输入事件的监听器。每当用户在输入框中输入内容时，就会触发这个监听器，我们可以在其中进行一些验证操作，例如检查输入是否为空、长度是否符合要求等等。使用setCustomValidity()方法来设定自定义提示信息，使用reportValidity()

<input>-Tag wird verwendet, um ein einzeiliges Eingabefeld zu erstellen, zum Beispiel:

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 = '搜索失败！';
    });
});

In den ersten beiden Codezeilen oben ist das <label> Wenn das tag code> für das Eingabefeld zum Hinzufügen einer Beschreibung verwendet wird, sollte der Wert des Attributs for mit dem Wert des Attributs id des Attributs &lt identisch sein ;input>-Tag. Auf diese Weise erhält das Eingabefeld den Fokus, wenn der Benutzer auf die Beschriftung klickt. In der dritten Codezeile ist der Wert des Attributs type „text“, was bedeutet, dass wir ein Texteingabefeld erstellen.

<textarea>-Tag wird verwendet, um mehrzeilige Eingabefelder zu erstellen, zum Beispiel:

rrreee

Im Vergleich zum <input>-Tag ist &lt ;textarea> Das -Tag verfügt über einen größeren bearbeitbaren Bereich und kann mehrere Textzeilen darin aufnehmen. Sie können auch Beschreibungs-Tags hinzufügen, um Benutzern ein besseres Bedienerlebnis zu bieten.

<form>-Tag ist ein Container, der eine Reihe von Eingabeelementen und eine Schaltfläche zum Senden enthält. Zum Beispiel: 🎜rrreee🎜Im obigen Code werden die Attribute action und method des Tags <form> verwendet, um die übermittelten Daten anzugeben URL und Methode. Das <button>-Tag wird zum Erstellen einer Senden-Schaltfläche verwendet. Wenn der Benutzer auf die Schaltfläche klickt, werden die Formulardaten an den Server gesendet. 🎜

🎜CSS🎜🎜🎜Der Vorteil der Verwendung von Standard-HTML-Tags zum Erstellen von Eingabefeldern besteht darin, dass wir CSS verwenden können, um den Stil des Eingabefelds zu steuern und so eine bessere Benutzererfahrung zu erzielen. Der folgende Code kann beispielsweise dafür sorgen, dass sich das Eingabefeld an die Breite des übergeordneten Elements anpasst und die Schönheit erhöht: 🎜rrreee🎜Im obigen Code wird das Attribut box-sizing verwendet, um die Größe zu steuern des Eingabefelds und padding Das Attribut dient zur Steuerung des Abstands, das Attribut border dient zur Steuerung des Rahmenstils, der border-radius Das Attribut code> wird verwendet, um den Randrundungswinkel zu steuern, und das Attribut <code>resize. Das Attribut wird verwendet, um zu steuern, ob die Größe des Eingabefelds geändert werden kann. 🎜🎜Zusätzlich zu den oben genannten Attributen können wir auch CSS verwenden, um den Animationseffekt des Eingabefelds wie folgt zu erzielen: 🎜rrreee🎜Wenn der Benutzer auf das Eingabefeld klickt, bewirkt der obige Code, dass das Eingabefeld den Rand ändert Farbe und erzeugen Sie einen kurzen Animationseffekt. Durch das Hinzufügen dieser Stile wird Ihre Website attraktiver und die Benutzerinteraktion erhöht. 🎜
🎜JavaScript🎜🎜🎜Schließlich können wir JavaScript verwenden, um die Überprüfung von Eingabefeldern, Eingabeaufforderungen und andere interaktive Effekte zu implementieren. Zum Beispiel: 🎜rrreee🎜Im obigen Code verwenden wir die Methode EventTarget.addEventListener(), um dem Eingabefeld einen Eingabeereignis-Listener hinzuzufügen. Immer wenn der Benutzer etwas in das Eingabefeld eingibt, wird dieser Listener ausgelöst, und wir können darin einige Überprüfungsvorgänge durchführen, z. B. prüfen, ob die Eingabe leer ist, ob die Länge den Anforderungen entspricht usw. Verwenden Sie die Methode setCustomValidity(), um benutzerdefinierte Eingabeaufforderungsinformationen festzulegen, und verwenden Sie die Methode reportValidity(), um das Eingabeaufforderungsfeld anzuzeigen. 🎜🎜Neben der Verifizierung können wir auch andere Funktionen wie Suche und Zuordnung im Eingabefeld in JavaScript implementieren, wie zum Beispiel: 🎜rrreee🎜Im obigen Code verwenden wir die Fetch-API, um eine Suchanfrage an den Server zu initiieren. und dann werden die Suchergebnisse in der Rückruffunktion verarbeitet und die Ergebnisse auf der Seite gerendert. 🎜🎜Zusammenfassung🎜🎜In diesem Artikel haben wir besprochen, wie das Web-Frontend Eingabefelder implementiert. Wir verwenden HTML-Tags, um das Eingabefeld zu erstellen, verwenden CSS, um den Stil des Eingabefelds zu steuern, und verwenden JavaScript, um Validierung, Eingabeaufforderungen und andere interaktive Effekte des Eingabefelds zu implementieren. Ich hoffe, dieser Artikel ist hilfreich für Sie! 🎜

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Eingabefeld im Web-Frontend. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!