HTML5 - フォーム入力バリデーションの詳細説明（画像とテキスト）

1. 他のフォーム要素を使用する

1. オプションのリストを生成する

select 要素を使用して、ユーザーが選択できるオプションのリストを生成できます。

• size 属性は、ユーザーに表示されるオプションの数を設定するために使用されます。

• multiple 属性を使用すると、ユーザーは一度に複数のオプションを選択できます。

例 1: 選択リスト

<label for="fave">
    Favorite Fruit:    <select name="fave" id="fave">
        <option value="apples">苹果</option>
        <option value="organges">橘子</option>
        <option value="pears">梨</option>
    </select></label>

例 2: 選択リスト、同時に複数の選択をサポート

<label for="like">
    Like Sport:
    <select name="like" id="like" size="3" multiple>
        <option value="football">足球</option>
        <option value="basketball">篮球</option>
        <option value="table tennis">乒乓球</option>
        <option value="badminton">羽毛球</option>
        <option value="swiming">游泳</option>
    </select>
</label>

例 3: ビルド構造
りー

2.さらに行テキストを入力

textarea 要素は複数行のテキスト ボックスを生成し、ユーザーは複数行のテキストを入力できます。

プロパティ説明rows行数cols列数ラップフォーム送信時にテキストに改行を挿入する方法を制御します: ハードの場合は改行が挿入されますが、ソフトの場合は挿入されません

例: textarea 要素を使用します

<label for="love">
    <select name="love" id="love">
        <optgroup label="前端语言">
            <option value="javascript">JavaScript</option>
            <option value="html">Html</option>
            <option value="css">CSS</option>
        </optgroup>
        <optgroup label="后端语言">
            <option value="java">Java</option>
            <option value="php">PHP</option>
        </optgroup>
    </select></label>

3 計算結果を表します

output は計算の結果を表します。

例: 計算結果

<form action="http://localhost:8888/form/select" method="post">
    <p>
        <label for="textarea_1">
            请输入一段文字:<textarea name="textarea_1" id="textarea_1" cols="30" rows="10" wrap="soft"></textarea>
        </label>
    </p>
    <p>
        <label for="textarea_2">
            请再次输入一段文字:<textarea name="textarea_2" id="textarea_2" cols="30" rows="10" wrap="hard"></textarea>
        </label>
    </p>
    <input type="submit" value="提交"></form>

2. 入力検証を使用する

HTML5 では入力検証のサポートが導入されています。デザイナーはブラウザにどのタイプのデータが必要かを伝えることができ、ブラウザはこの情報を使用して、フォームを送信する前にユーザーが入力したデータが有効かどうかを確認します。

利点は: ユーザーは問題に関するフィードバックをすぐに得ることができます。

検証属性サポートされている要素電話必須テキストエリア、選択、入力（テキスト、検索、URL、電子メール、パスワード、日付ピッカー、番号、チェックボックス、ラジオ、ファイル）最小、最大入力(数値、範囲、日付、日時、ローカル日時、月、時刻、週)パターン入力(テキスト、検索、URL、電話、電子メール、パスワード)

例: 検証

<form action="return false;" oninput="res.value = quantity.value * price.value">
    <fieldset>
        <legend>价格计算</legend>
        <input type="number" placeholder="数量" id="quantity" name="quantity"> x        
        <input type="number" placeholder="价格" id="price" name="price"> =        
        <output for="quantity price" name="res"></output>
    </fieldset></form>

注: パターンは電子メールと URL を検証します。コンテンツが入力されていない場合は検証がトリガーされないため、required! と組み合わせて使用​​する必要があります。
入力検証を無効にする: form 要素の novalidate 属性を設定することも、フォームの送信に使用されるボタンまたは input 要素の formnovalidate 属性を設定することもできます。

以上がHTML5 - フォーム入力バリデーションの詳細説明（画像とテキスト）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。