ホームページ > 記事 > ウェブフロントエンド > HTML5 - フォーム使用のためのコード例の概要

HTML5 - フォーム使用のためのコード例の概要

黄舟オリジナル: 2017-03-11 16:55:072029ブラウズ

フォームを使用してデータを送信する場合: HTML4 では、input、ボタン、およびその他のフォーム関連要素を form 要素に配置する必要がありますが、HTML5 ではこの制限は存在しません。このような要素は、ドキュメント内の任意の場所にあるフォームにリンクできます (form 要素の form 属性を介して [下記の例 3])。

1. 基本的なフォームを作成する

例 1: フォームの結果を新しいタブページに表示する

<!doctype html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Form Target</title></head><body>
    <form action="http://localhost:8888/form/userInfo" enctype="application/x-www-form-urlencoded"
          target="_blank" method="post" autocomplete="off">
        <p>
            <label for="username">用户名:</label>
            <input type="text" name="username" id="username" autofocus>
        </p>
        <p>
            <label for="password">密码:</label>
            <input type="password" id="password" autocomplete="on"><br>
        </p>
        <p>
            <label for="address">地址:</label>
            <input type="text" name="address" id="address" disabled value="北京市">
        </p>
        <p>
            <input type="hidden" name="source" value="直接来源">
        </p>
        <button>提交</button>
    </form></body></html>

HTML5 - フォーム使用のためのコード例の概要

1. form

action 属性は、ブラウザーが送信時にユーザーから収集する情報データの送信先 [上記の例では、送信されたデータは「http://www.php.cn/:8888/form/userInfo」に送信されます]。 action 属性が相対 URL を指定している場合、値は現在のページの URL の後ろにグラフトされます (base 要素が使用されている場合は、要素の href 属性の値)。

2. データエンコーディングを設定する

enctype 属性は、サーバーに送信されるデータに対してブラウザで使用されるエンコーディング方式を指定します [上記の例では、デフォルトのエンコーディング方式が使用されます]。

値説明application/x-www-form-urlencodedデフォルトのエンコーディングは、サーバーにファイルをアップロードするために使用できないことを除き、さまざまなタイプのフォームに適しています。 multipart/form-data 通常、サーバーにファイルをアップロードする必要があるフォームにのみ使用されますtext/plain3.フォームのオートコンプリート機能




ブラウザごとに実装方法が異なるので注意して使用してください

autocomplete

属性、デフォルトはオンですが、オフに設定すると、ブラウザはフォームに自動的に入力することを禁止されます。 各入力要素のオートコンプリート属性の設定は、フォーム要素の動作をオーバーライドできます。
4. フォームのフィードバック情報のターゲット表示場所を指定します

デフォルトでは、ブラウザはフォームの送信後に、フォームが配置されている元のページをサーバーからフィードバックされた情報に置き換えます。これは、form 要素の target 属性を使用して変更できます (上記の例では、結果は新しいタブに表示されます)。

Value_blank_parent _self_top

5. 设置表单名称

name属性可以用来为表单设置一个独一无二uerde标识符。
注意，input元素不设置name属性，那么用户在其中输入的数据在提交表单时不会被发送给服务器【上述示例中，“密码”字段不会被提交】。

6. 在表单中添加说明标签

可以为input元素配一个label元素，将label元素的for属性设置为input的id值，这样input元素和label元素就关联起来，有助于屏幕阅读器和其他残障辅助技术对表单的处理。

7. 自动聚焦到某个input元素

autofocus属性可以聚焦于某个input元素【上述示例中，“用户名”字段被自动聚焦】
注意，多个元素都设置了该属性，那么浏览器将会自动聚焦于其中的最后一个元素。

8. 禁用单个input元素

设置disabled属性，可以禁用input元素。
注意，被禁用的元素不能被提交【上述示例中，“地址”字段被禁用未被提交到服务器】。

二、对表单元素编组

可以使用fieldset元素将一些元素组织在一起。
示例2：将相关表单元素进行编组

<!doctype html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>元素分组</title></head><body>
    <form action="http://localhost:8888/form/userInfo" method="post" target="_blank">
       <fieldset>
           <legend>用户基本信息</legend>
           <p>
               <label for="username">用户名:</label>
               <input type="text" name="username" id="username">
           </p>
           <p>
               <label for="address">地址:</label>
               <input type="text" name="address" id="address">
           </p>
       </fieldset>
        <fieldset>
            <legend>用户爱好</legend>
            <p>
                <label for="fave1">#1:</label>
                <input type="text" name="fave1" id="fave1">
            </p>
            <p>
                <label for="fave2">#2:</label>
                <input type="text" name="fave2" id="fave2">
            </p>
            <p>
                <label for="fave1">#3:</label>
                <input type="text" name="fave3" id="fave3">
            </p>
        </fieldset>
        <button>提交</button>
    </form></body></html>

HTML5 - フォーム使用のためのコード例の概要
说明：

通过设置fieldset元素的disabled属性，可以一次性地禁用多个input元素；
添加lagend元素，可以向用户提供相关说明，但其必须为fieldset元素的第一个子元素。

三、使用button元素

表：button元素的type属性的值

Description
ブラウザのフィードバック情報を新しいウィンドウ (またはタブ) に表示します
ブラウザのフィードバック情報を親ウィンドウに表示しますグループ
現在のウィンドウにブラウザのフィードバックを表示します (デフォルトの動作)
トップウィンドウにブラウザのフィードバックを表示します
ブラウザの設定を設定しますフィードバック情報は、指定されたウィンドウフレームに表示されます

值	说明
submit	提交表单（默认行为）
reset	重置表单
button	无具体语义

表：type属性设置为submit时button元素的额外属性

属性	说明
form	指定按钮相关的表单
formaction	覆盖form元素的action属性，另行指定表单将要提交到的URL
formenctype	覆盖form元素的enctype属性，另行指定表单的编码方式
formmethod	覆盖form元素的method属性
formtarget	覆盖form元素的target属性
formnovalidate	覆盖form元素的novalidate属性，表明是否应执行客户端数据有效性检查

示例3：button元素提交表单

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>button属性控制表单</title></head><body>
    <form id="myForm"></form>
    <p>
        <label for="username">用户名:</label>
        <input type="text" name="username" id="username" form="myForm">
    </p>
    <p>
        <label for="address">地址:</label>
        <input type="text" name="address" id="address" form="myForm">
    </p>
    <button type="submit" form="myForm" formaction="http://localhost:8888/form/userInfo" formmethod="post">提交</button>
    <button type="reset" form="myForm">重置</button></body></html>

以上がHTML5 - フォーム使用のためのコード例の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML5 による HTML ドキュメントの作成についての詳細な紹介次の記事：HTML5 による HTML ドキュメントの作成についての詳細な紹介

続きを見る