Web フロントエンドで入力ボックスを作成する方法

Web フロントエンド開発において、入力ボックスは、ユーザーがテキスト、数値、その他の形式のデータを入力するために使用される基本コンポーネントです。この記事では、Web フロントエンドが入力ボックスを実装する方法について説明します。

1. HTML

まず、HTML タグを使用して入力ボックスを定義する必要があります。 HTML で一般的に使用されるタグには、<input>、<textarea>、<form> などがあります。

<input> タグは、単一行の入力ボックスを作成するために使用されます。例:

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

上記のコードの最初の 2 行では、 <label> タグは、入力ボックスに説明を追加するために使用されます。for 属性の値は、# の id 属性値と同じである必要があります。 ##<input> タグ。こうすることで、ユーザーがラベルをクリックすると、入力ボックスにフォーカスが置かれます。コードの 3 行目では、type 属性の値は「text」です。これは、テキスト入力ボックスを作成していることを意味します。

<textarea> タグは、複数行の入力ボックスを作成するために使用されます。例:

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

<input>## との比較# tag, <textarea>マークされた編集可能エリアはより大きく、その中に複数行のテキストを収容できます。説明タグを追加して、ユーザーにより良い操作エクスペリエンスを提供することもできます。

<form>

タグは、一連の入力項目と送信ボタンを含むコンテナです。例: <pre class="brush:php;toolbar:false">&lt;form action=&quot;login.php&quot; method=&quot;post&quot;&gt;   &lt;label for=&quot;username&quot;&gt;用户名：&lt;/label&gt;   &lt;input type=&quot;text&quot; id=&quot;username&quot; name=&quot;username&quot;&gt;   &lt;label for=&quot;password&quot;&gt;密码：&lt;/label&gt;   &lt;input type=&quot;password&quot; id=&quot;password&quot; name=&quot;password&quot;&gt;   &lt;button type=&quot;submit&quot;&gt;登录&lt;/button&gt; &lt;/form&gt;</pre> 上記のコードでは、

<form>

タグの action 属性と method 属性を使用して、送信された URL とメソッド。 <button> タグは送信ボタンを作成するために使用され、ユーザーがボタンをクリックすると、フォーム データがサーバーに送信されます。

CSS

2. 標準の 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;
}

ユーザーが入力ボックスをクリックすると、上記のコードは次のようになります。入力ボックスにより、境界線の色の変更と簡単なアニメーション効果が生成されます。これらのスタイルを追加すると、サイトがより魅力的になり、ユーザー エンゲージメントが高まります。

JavaScript

3. 最後に、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() メソッドを使用してプロンプト ボックスをポップアップします。 検証に加えて、JavaScript の入力ボックスに検索や関連付けなどの他の関数を実装することもできます。例:

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

上記のコードでは、Fetch API を使用して次のことを行います。サーバーにデータを送信する 検索リクエストが開始され、検索結果がコールバック関数で処理され、結果がページに表示されます。

概要

この記事では、Web フロントエンドが入力ボックスを実装する方法について説明しました。 HTML タグを使用して入力ボックスを作成し、CSS を使用して入力ボックスのスタイルを制御し、JavaScript を使用して入力ボックスの検証、プロンプト、その他の対話型効果を実装します。この記事がお役に立てば幸いです!

以上がWeb フロントエンドで入力ボックスを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。