HTMLのinputタグの属性は何ですか? input タグの使用法の概要 (例付き)

この記事では、html input タグの属性を中心に、html input タグの具体的な使い方をまとめて紹介します。 HTML input タグの使用法を見てみましょう

まず、HTML input タグの属性について説明します:

1.type: この属性は、input に入力する必要がある唯一の属性です。もちろん、空白のままにすることもできます。デフォルトは type = "text" です。それが持つ具体的な値については後で説明します。

2.required: フィールドが必須かどうかをマークします。フィールドが required = "required" (厳密モード)、または必須 (緩和モード) としてマークされている場合 (追記: 以下の属性は同じ方法で記述されるため、1 つずつ書き出されません)、このフィールドの値が空であるか、入力された値が無効な場合は、フォームを送信できません。無効な値とは何ですか?パターン属性を見てください。

3.pattern: この属性には JavaScript スタイルの正規表現が含まれている必要があります。そうでない場合、入力コンテンツは無効になります。正規表現について知りませんか? JavaScript の正規表現を見てみましょう。

4.min max: これら 2 つの属性は、数値と範囲だけでなく、日付、時刻、時間、その他の入力にも使用されます。名前が示すように、その役割は最大値と最小値を制限することです。

5.step: max min と同様に、その機能は上下にクリックできるボタンを提供することです。たとえば、現在の数値が 1 で、step = "5" に設定すると、上ボタンをクリックします。 6になります。

6.placeholder: この属性についてはあまり説明する必要はありません。一般に、ユーザーが実際にテキストを入力するときに、入力されたテキストによって上書きされます。

7.readonly: 名前が示すように、このプロパティは空のフォーム コントロールを編集不能にします。ここでの編集不可とは、無効であることを意味するのではなく、テキストが編集できないことを意味します。たとえば、ラジオやチェックボックスは本質的に編集できないため、この属性はそれらにとって意味がありません。

8.disabled: この属性はフォーム要素を無効にします。これは無効になり、

を除くすべてのフォーム要素が完全に無効になります。

9.maxlength: この属性は、ユーザーが入力する単語の最大数を制限するために使用されます。

10.size: 現在、サイズの制御はほとんどすべて CSS によって制御されています。

11.form: HTML5 では、フォーム内にフォーム コントロールをネストする必要はありません。新しい form 属性は、フォーム要素をページ上の任意のフォームに関連付けることができます。フォームにネストして、別のフォームと一緒に送信することもできます。コードは次のとおりです。

<form id="form1"></form>
<p>
<label for="admin">admin</label>
<input type="text" id="admin" form="form1"/>
</p>

このようにして、フォームと入力が接続されます。入力にフォーム属性がない場合は、それに最も近いフォームに関連付けられます。

12.autocomplete: 名前が示すように、オートコンプリートでは、ユーザーが入力の一部を入力すると、残りが自動的に入力されます。ブラウザは、次回自動的に入力できるように、ユーザーが入力した内容を保存する必要があります。

13.autofocus: この属性は、ページが読み込まれるときにこのフォーム コントロールが自動的にフォーカスを取得することを意味します。

上記はhtml inputタグの属性です。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトにアクセスしてください。最も完全な HTML ビデオ チュートリアルはこちらです)

次に、input タグの使用法について説明します:

まず、例を見てみましょう。 HTML 入力タグ:

<form action="demo_form.asp">
用户名: <input type="text" name="fname"><br>
输入框: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>

この効果は次の図に示すとおりです:

この効果は依然として優れており、これは最も単純な入力ボックス スタイルでもあります。 , シンプルとは、分かりやすいという意味でもあります。

HTML 入力タグの使用法の概要について説明します:

1. テキスト ボックス:

フォームでは、テキスト ボックスは、ユーザーが次のような文字、数字などを入力できるようにするために使用されます。ユーザーの名前、住所など。

コードの形式は次のとおりです:

<input type=”text” name=”...” size=”...” maxlength=”...” value=”...”/>

2. パスワード ボックス:

は、パスワードを入力するために使用される特別なテキスト フィールドです。

コードの形式は次のとおりです:

<input type=”password” name=”...”  size=”...” maxlength=”...” value=”...”/>

3. 隠しフィールド:

は、Web ページの訪問者には見えない要素です。フォームが送信されると、非表示フィールドは、設定時に定義した名前と値を使用してサーバーに情報を送信します。

コードの形式は次のとおりです:

<input type=”hidden” name=”...” value=”...”/>

4. ラジオ ボタン:

ユーザーが限られた数のオプションから 1 つを選択する必要がある場合にラジオ ボタンを使用します。たとえば、登録時に体重を選択します。

コードの形式は次のとおりです:

<input type=”radio” name=”...” value=”...”/>

5. チェックボックス:

選択するオプションの中から複数のオプションを選択できます。各チェックボックスは独立した要素であり、一意の名前を持つ必要があります。

コードの形式は次のとおりです:

<input type=”checkbox” name=”...” value=”...”/>

6. ファイルアップロードボックス:

コードの形式は次のとおりです:

<input type”file” name=”...”>

注: この関数を使用する場合、form タグにメソッド属性を指定する必要があります。メソッドを post として指定するには、enctype 属性を multipart/form-data として指定します。

説明: マルチパート コントロールが複数のファイルをアップロードするかどうか

上記は、この記事の html input タグの属性の概要であり、html input タグの使用法の概要です。ご質問がある場合は、以下にメッセージを残してください。

【編集者のおすすめ】

HTMLドロップダウンメニューの作り方は？ HTML ドロップダウン メニューのコード例の紹介

HTML の b タグと強いタグの違いは何ですか? bとstrongの違いまとめ

以上がHTMLのinputタグの属性は何ですか? input タグの使用法の概要 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。