HTMLのinputタグの属性は何ですか?

HTML の input タグの属性は、type、required、pattern、step、placeholder、readonly、disabled、size、form、maxlength、autofocus、min、max などです。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

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

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

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

フルネットワークの Web フロントエンド フルスタック データベース (一般ディレクトリ) を構築すると、より早く学習し、より確実に理解できるようになります。あなたにはその価値があります (継続的に更新されます)

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

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

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

6.placeholder: この属性についてはあまり説明する必要はありません。誰もがよく知っているはずです。これは通常、ユーザーに入力を促すために使用されます。ユーザーが実際にテキストを入力すると、この属性は上書きされます。入力されたテキスト。

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

8.disabled: この属性はフォーム要素を無効にします。これは無効になり、be6d67dae90cc1ad6469079e163d0939 を除くすべてのフォーム要素が完全に無効になります。

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

10.size: 実質的な効果はなくなり、サイズの制御はほとんどの場合 CSS によって制御されます。

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

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

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

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

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

上記は html input タグの属性です。

拡張情報

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

まず HTML の例を見てみましょう。 input タグ:

<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 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。

说明：multipart 控件是否上传多文件

推荐学习：html视频教程

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