あなたが知っておくべき5つの最も有用な入力要素属性

Webサイトを構築する際に優先する必要があるのは、ユーザーエクスペリエンスです。 入力要素の属性Web開発に興味がある場合は、入力要素の属性という用語に精通している必要があります。

このブログでは、まさにそれについて説明します。 入力タグについて説明します。5つはWeb開発に使用される入力属性を知っている必要があります。

入力タグ

入力HTML要素は、ユーザーからデータを取得するためのインタラクティブなWebベースのフォームを作成するための便利なタグです。 デバイスとユーザーエージェントに応じて、さまざまな入力データ制御ウィジェットを使用できます。

入力タグは非常に強力で、入力タイプと属性の多数の組み合わせに対して複雑です。

入力タグの例を見てみましょう。 ここでは、入力タグを使用して、ユーザーが自分の名前を最小4文字、最大8文字入力できる名前を入力しました。

以下の画像は、HTMLコードがエディターでどのように表示されるかを示しています。

以下の画像は、上記の出力がブラウザでどのように表示されるかを示しています。

したがって、これはユーザーからのデータを受け入れる方法です。 入力タグには多くの種類があります。 それらのいくつかは、テキスト、ボタン、チェックボックス、ラジオ、日時ローカル、範囲、検索です。 type属性のデフォルト値は「text」であることに注意してください。

<input>の動作は、そのtype属性の値に応じて大幅に変化することに注意することが重要です。 その結果、さまざまな種類がそれぞれの個別のリファレンスページに記載されています。 このプロパティが指定されていない場合、テキストタイプがデフォルト値として使用されます。

入力属性

<Input>要素は、その属性のために非常に強力です。 このことから、type属性は非常に重要です。 タイプに関係なく、すべての<input>要素はHTMLInputElementインターフェイスに基づいているため、これは、両方がほぼ同じ属性のセットを共有しているためです。 ただし、実際には、入力タイプのサブセットの特定のタイプに影響を及ぼします。 さらに、一部の属性は入力タイプに影響を与えますが、属性によって異なる場合があります。

ここに、開発者がよく知っておくべきいくつかの重要な入力タイプ属性をリストしました。

• 最小長
• 最大長
• 無効
• オートフォーカス
• プレースホルダー

ミニレングス

この属性は、input要素のテキスト、検索、tel、URL、電子メール、またはパスワードのタイプでのみ機能します。 minlength属性は、UTF-16コード単位のように、入力ボックスに入力される最小文字を指定します。

これは、maxlengthで指定された値以下の非負の整数値である必要があります。 minlengthに値が指定されていないか、無効な値が指定されている場合、入力には最小長がありません。 入力ボックスに入力された文字数が最小長より少ない場合、フォームの送信は失敗します。

以下の画像は、HTMLコードがエディターでどのように表示されるかを示しています。

以下の画像は、上記の出力がブラウザでどのように表示されるかを示しています。

最大長

この属性は、ミニレングスなどの入力要素のテキスト、検索、tel、URL、電子メール、またはパスワードタイプでも機能します。 maxlength属性は、UTF-16コード単位のように、入力ボックスに入力する最大文字数を指定します。

これは、minlengthで指定された値以上の非負の整数値である必要があります。 maxlengthに値が指定されていないか、無効な値が指定されている場合、入力には最大長がありません。

デフォルトでは、ブラウザは、指定された最大長を超える場合、ユーザーが入力ボックスに文字数を入力できないようにします。

以下の画像は、HTMLコードがエディターでどのように表示されるかを示しています。

以下の画像は、上記の出力がブラウザでどのように表示されるかを示しています。

無効

これはブール属性です。 この属性は、ユーザーが入力を操作してはならないことを示します。

無効にされた入力は、使用できないことを示す他の形式の表示を使用した場合の調光色で具体的に表示されます。 無効化された属性はクリックイベントを受信せず、無効化されたフォームの値はフォームの送信時に送信されません。

以下の画像は、HTMLコードがエディターでどのように表示されるかを示しています。

以下の画像は、上記の出力がブラウザでどのように表示されるかを示しています。

オートフォーカス

これもdisabled属性のようなブール属性です。 これは、ページが読み込みプロセスを完了すると、入力ボックスにフォーカスが合うことを示しています。 または、オートフォーカス属性を含む入力要素が表示されている場合。

オートフォーカス属性を取得している要素は1つだけです。 複数の要素を指定すると、非表示の入力をフォーカスできないため、属性を持つ最初の要素がフォーカスされます。 したがって、オートフォーカス属性は、非表示の入力タイプで使用できます。

以下の画像は、HTMLコードがエディターでどのように表示されるかを示しています。

以下の画像は、上記の出力がブラウザでどのように表示されるかを示しています。

プレースホルダー

プレースホルダーは文字列属性です。 これは、入力フィールドに入力する必要のあるデータの概念を提供する属性です。

説明ではなく、入力フィールドに入力するデータの種類を示唆する単語または短いフレーズである必要があります。 したがって、たとえば、フィールドがユーザーの名をキャプチャすることが期待され、そのラベルが「名」である場合、適切なプレースホルダーは「たとえば、ブルース」である可能性があります。

以下の画像は、HTMLコードがエディターでどのように表示されるかを示しています。

以下の画像は、上記の出力がブラウザでどのように表示されるかを示しています。

まとめ

このブログでは、特にWeb開発者の場合に知っておくべき、いくつかの入力要素属性を紹介しました。 これらの属性を使用して、HTMLフォームまたはWebページでさまざまな方法で入力要素を制御できます。

HTMLを含め、日々追加されている新しい属性はたくさんありますが、これらは知っておくべき属性のいくつかです。

このブログがお役に立てば幸いです。 Web開発またはWebデザインサービスを手に入れる必要がありますか？ お気軽にお問い合わせください！

編集者：アムルサ