How to create an input box on the web front-end

In web front-end development, the input box is a basic component used for users to input text, numbers and other forms of data. In this article, we will explore how the web front-end implements input boxes.

1. HTML

First, we need to use HTML tags to define the input box. In HTML, commonly used tags include <input>, <textarea>, and <form>, etc.

<input> tag is used to create a single-line input box, for example:

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

In the first two lines of code above, <label>## The # tag is used to add a description to the input box. The value of the for attribute should be the same as the id attribute value of the <input> tag. This way when the user clicks on the label, the input box will gain focus. In the third line of code, the value of the type attribute is "text", which means that we are creating a text input box.

<textarea> tag is used to create a multi-line input box, for example:

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

Compared to the

<input> tag, <textarea>The marked editable area is larger and can accommodate multiple lines of text within it. You can also add description tags to provide users with a better operating experience.

<form>The tag is a container that contains a set of input items and a submit button. For example:

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

In the above code, the

action and method attributes of the <form> tag are used to specify the submitted URL and method . tag is used to create a submit button. When the user clicks the button, the form data will be submitted to the server.

CSS

The advantage of using standard HTML tags to create input boxes is that we can use CSS to control the style of the input box to achieve a better user experience. For example, the following code can make the input box adapt to the width of the parent element and increase the beauty:

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

In the above code, the

box-sizing attribute is used to control the size of the input box,# The ##padding property is used to control the padding, the border property is used to control the border style, the border-radius property is used to control the border rounding angle, resize Attributes are used to control whether the input box can be resized. In addition to the above attributes, we can also use CSS to achieve the animation effect of the input box, as follows:

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

When the user clicks the input box, the above code will cause the input box to generate a border Color changes and brief animation effects. The addition of these styles will make your site more attractive and increase user engagement.

JavaScript

3. Finally, we can use JavaScript to implement input box verification, prompts, and other interactive effects. For example:

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

In the above code, we use the

EventTarget.addEventListener()

method to add an input event listener to the input box. Whenever the user enters content in the input box, this listener will be triggered, and we can perform some verification operations in it, such as checking whether the input is empty, whether the length meets the requirements, etc. Use the setCustomValidity() method to set custom prompt information, and use the reportValidity() method to pop up the prompt box. In addition to verification, we can also implement other functions such as search and association in the input box in JavaScript, for example:

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 the above code, we use the Fetch API to send data to the server A search request is initiated, the search results are processed in the callback function, and the results are rendered to the page.

Summary

In this article, we discussed how the web front-end implements the input box. We use HTML tags to create the input box, use CSS to control the style of the input box, and use JavaScript to implement validation, prompts, and other interactive effects of the input box. Hope this article is helpful to you!

The above is the detailed content of How to create an input box on the web front-end. For more information, please follow other related articles on the PHP Chinese website!