Web フロントエンド開発において、入力ボックスは、ユーザーがテキスト、数値、その他の形式のデータを入力するために使用される基本コンポーネントです。この記事では、Web フロントエンドが入力ボックスを実装する方法について説明します。
まず、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>マークされた編集可能エリアはより大きく、その中に複数行のテキストを収容できます。説明タグを追加して、ユーザーにより良い操作エクスペリエンスを提供することもできます。
タグは、一連の入力項目と送信ボタンを含むコンテナです。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><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></pre><div class="contentsignin">ログイン後にコピー</div></div> 上記のコードでは、
タグの action 属性と method 属性を使用して、送信された URL とメソッド。 <button> タグは送信ボタンを作成するために使用され、ユーザーがボタンをクリックすると、フォーム データがサーバーに送信されます。
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
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('li');
item.textContent = results[i].title;
searchResults.appendChild(item);
}
})
.catch(err => {
console.error(err);
searchResults.innerHTML = '搜索失败！';
});
});以上がWeb フロントエンドで入力ボックスを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
