ホームページ > 記事 > ウェブフロントエンド > HTML5 フォーム関連の要素と属性

HTML5 フォーム関連の要素と属性

不言オリジナル: 2018-05-03 15:19:311438ブラウズ

この記事では主に HTML5 フォームの関連要素と属性を紹介します。必要な友達に共有します。

ID を指定できます。 style、class などのコア属性でも、onclick イベント属性を指定できます。さらに、以下の属性も指定できます。

アクション: フォーム送信用の URL または URI を指定します。

メソッド: リクエストメソッドを指定します。通常は get または post です。

enctype: フォームコンテンツのエンコードに使用する文字セットを指定します。

name: フォームの一意の名前を指定します。通常は id の属性値と一致します。

target: ターゲット URL を開くために使用する方法を指定します。

enctype 属性は、フォームデータのエンコード方法を指定するために使用されます。この属性には 3 つの属性値があります。

application/x-www-form-urlencoded: これは、value 属性値のみを処理します。このエンコーディングを使用するフォームコントロールは、フォームコントロールの値を URL エンコーディングに処理します。

multipart/form-data: このエンコーディングメソッドは、フォームデータをバイナリ方式で処理し、ファイルフィールドで指定されたファイルのコンテンツをリクエストパラメーターにカプセル化します。

text/plain: このエンコード方法は、フォームの action 属性値が mailto:URL の形式である場合に使用され、フォームを通じて電子メールを直接送信するのに適しています。

フォームコントロールをリクエストパラメーターに変換するためのルールは次のとおりです:

name 属性を持つ各フォームコントロールはリクエストパラメーターに対応します。name 属性のないフォームコントロールはリクエストパラメーターを生成しません。

複数のフォームコントロールが同じ name 属性を持つ場合、複数のフォームコントロールは 1 つのリクエストパラメーターのみを生成しますが、このパラメーターには複数の値があります。

フォームコントロールのname属性はリクエストパラメータ名を指定し、value属性はリクエストパラメータの値を指定します。

フォームコントロールが無効または無効化 = "無効" 属性を設定すると、フォームコントロールはリクエストパラメーターを生成しなくなります。

d5fd7aea971a85678ba271703566ebfd:

単一行テキストボックス: 0f0306f9b187f2e363126bc29c8b1420 要素の type 属性をテキストとして指定します。

パスワードテキストボックス: 0f0306f9b187f2e363126bc29c8b1420 要素の type 属性をパスワードとして指定します。

非表示フィールド: 0f0306f9b187f2e363126bc29c8b1420 要素の type 属性を非表示として指定します。

ラジオボタン: 0f0306f9b187f2e363126bc29c8b1420 要素の type 属性を radio として指定します。

チェックボックス: 0f0306f9b187f2e363126bc29c8b1420 要素の type 属性をチェックボックスとして指定します。

画像ドメイン: 0f0306f9b187f2e363126bc29c8b1420 要素の type 属性を画像として指定します。

ファイルアップロードドメイン: 0f0306f9b187f2e363126bc29c8b1420 要素の type 属性を file として指定します。

送信、リセット、およびアクションなしボタン: 0f0306f9b187f2e363126bc29c8b1420 要素の type 属性をそれぞれ送信、リセット、またはボタンとして指定するだけです。

0f0306f9b187f2e363126bc29c8b1420 要素では、id、style、class などのコア属性、onclick などのイベント属性、onfocus や onblur などのフォーカスイベント属性を指定できます。さらに、次の属性を指定することもできます:

checked: ラジオボタンと、チェックボックスがデフォルトでチェックされるかどうかを設定します。

disabled: type="hidden" の場合、この属性は指定できないことを示します。

maxlength: 入力ボックスに入力できる最大文字数を指定します。

readonly: 指定されたテキストボックスの内容は変更できません。

size: 要素の幅を指定します。 type="hidden" の場合、この属性は指定できません。

src: imageフィールドに表示される画像のURLを指定します。この属性はtype="image"の場合のみ指定できます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=GBK"/>
    <title>getForm</title>
</head>
<body>
    <form action="http://www.crazyit.org" method="get">
        单行文本框：<input id="username" name="username" type="text" readonly="readonly"/><br/>
        密码框：<input id="password" name="password" type="password"/><br/>
        隐藏域：<input id="hidden" name="hidden" type="hidden"/><br/>
        第一组单选框：<br/>
        <input id="color" name="color" type="radio" value="red"/>
        <input id="color2" name="color" type="radio" value="green"/>
        <input id="color3" name="color" type="radio" value="blue"/><br/>
        第二个单选框：<br/>
        <input id="gender" name="gender" type="radio" value="male"/>
        <input id="gender2" name="gender" type="radio" value="female"><br/>
        两个复选框：<br/>
        <input id="website" name="website" type="checkbox" value="leegang.org"/>
        <input id="website2" name="website" type="checkbox" value="crazyit.org"/><br/>
        文件上传域：<input id="file" name="file" type="file"/><br/>
        图像域：<input type="image" src="img/wjc.gif" alt="疯狂Java联盟"/><br/>
        下面是四个按钮：<br/>
        <input id="ok" name="ok" type="submit" value="提交"/>
        <input id="dis" name="dis" type="submit" value="提交" disabled="disabled"/>
        <input id="cancle" name="cancle" type="reset" value="重填"/>
        <input id="no" name="no" type="button" value="无动作"/>
    </form>
</body>
</html>

bfdf57554631c62e63917d588904f58a:

ラベルをフォームコントロールに関連付ける方法は 2 つあります:

for 属性を暗黙的に使用します: for 属性は、関連付けられたフォームコントロールの id 属性値です。 (推奨)

関連付けを表示: 通常のテキストとフォームコントロールを bfdf57554631c62e63917d588904f58a 要素内にまとめて配置します。

<form action="http://www.crazyit.org" method="get">
        <label for="username">单行文本框：</label>
        <input id="username" name="username" type="text"/><br/>
        <label>密码框：<input id="password" name="password" type="password"/></label><br/>
        <input id="ok" type="submit" value="登录疯狂Java联盟"/>
    </form>

de935b9c153fbe5d6ad7df96bd65d7b8:

には、通常のテキスト、テキスト書式タグ、画像などを含めることができ、入力ボタンよりも豊富な機能があります。

de935b9c153fbe5d6ad7df96bd65d7b8 要素では、id、style、class などのコア属性と、onclick などのイベント応答属性を指定できます。さらに、次の属性も指定できます:

disabled: ボタンを無効にするかどうか。

name: ボタンの一意の名前を指定します。

type: ボタンが属するボタンの種類を指定します。属性値はボタン、リセット、または送信のみです。

value: ボタンの初期値を指定します。

<form action="http://www.crazyit.org" method="get">
        <button type="button"><b>提交</b></button><br/>
        <button type="submit"><img src="images/wjc.gif" alt="crazyit.org"/></button><br/>
    </form>

815c08aea17433a6272b681dc1d34168:

id、style、class などのコア属性を指定できます。この要素では、onchange イベント属性のみを指定できます。さらに、次の属性を指定することもできます:

disabled: リストボックスとドロップダウンメニューを無効にするように設定します。

multiple: 複数の選択を設定します。

size: リストボックスに複数のリスト項目を同時に表示できることを指定します。

815c08aea17433a6272b681dc1d34168 要素には次の 2 つの要素のみを含めることができます:

d8f14978b2105a39d07c390b6142b1e4: リスト項目とメニュー項目を定義するために使用されます。

ab954e0f6bf894bea018459b7fa67ae0: リスト項目とメニュー項目グループを定義するために使用されます。この要素には、d8f14978b2105a39d07c390b6142b1e4 サブ要素のみを含めることができます。

43d7dfa79a91949688a1bed28448d8e3:

43d7dfa79a91949688a1bed28448d8e3 要素では、id、style、class などのコア属性に加え、onclick、onselect、onchange イベント属性を指定できます。さらに、この要素では次の属性も指定できます:

cols: テキストフィールドの幅を指定します。

rows: テキストフィールドの高さを指定します。

disabled: このテキストフィールドを無効にします。

readonly: 指定されたテキストは読み取り専用です。

HTML5 フォーム関連の要素と属性

関連記事