HTML5 フォーム関連の要素と属性-htmlチュートリアル-php.cn

この記事では主に 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属性はリクエストパラメータの値を指定します。

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

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

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

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

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

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

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

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

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

要素では、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>

ログイン後にコピー

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

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

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

<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>

ログイン後にコピー