戦闘へのWebフロントエンドの取得:HTML5のフォームタグ

フォームの紹介

フォームフォームは、主にWebページが独自に使用するために送信されたデータを傍受することができ、ユーザーがWebアプリケーションにデータを送信することを可能にするWebアプリケーションデータ、ユーザーと対話するために使用されています。フォーム要素はシングルライン/複数行のテキストボックス、プルダウンメニュー、ボタン、チェックボックス、ラジオボタン、一般に時間タグラベルフォーム要素としているフォーム要素、によって一般に複数を形成するために、オブジェクトを記述するために使用されます。以下のように使用することができますプロパティ。

フォーム情報を処理するアプリケーションのアドレスのためのアクション。
この方法は、ブラウザがHTTPフォーム送信メソッドを使用していること。
HTTP GET GETメソッドプロトコルに対応するが、フォームデータが「?」分離用いて、URIに追加された
POSTメソッドに対応するポストHTTPプロトコルを、フォームデータがHTTPプロトコル要求パケットのボディ部に含まれます。
フォームセットの名前名前
のターゲットは、ブラウザの後に提出された情報がどこに表示される応答フォームを受信表します。
_self、_blank、_parent、これらと同じ値とハイパーリンクを_top

フォームデータのコンテンツタイプ

フォームデータは、コンテンツタイプの属性のenctypeによって設定されています

1.アプリケーション/ x-www-form-urlencodedで

符号化方式を送信する前に、すべての文字(デフォルト)を使用するには:

1)コントロールの名前と値は[+]を使用して空白文字をエスケープしている予約文字は、一般に、(として、特定の目的のために使用される置換:/;)@ =&等?。(HHは、文字のASCIIコードを表す2桁の16進数を表す)%HH変換を用いた非数字とアルファベット文字、

2)彼らは文書へのデータ・ストリームに表示される順にリストされている「名前/値」のペアを制御します。「=」スプリットを使用して、「名前」、「値」、2間の間隔の使用・「名前/値。」

2.マルチパート/フォームデータ

ない文字エンコーディング。[]フォームが含まれているファイルアップロードコントロールを使用するときは、この値を使用する必要があります。データが複数の部分に分割され、構造のウェル制御の各代表は、文書データストリームの一部として、各セクションは、順次、それらが文書データストリームに現れる順序でサーバに送信され、境界部分の各々ではありませんこれは、データに表示されます。各セクションは、第一コンテンツdespositionのタイトルを有し、その値のフォーマットは:コンテンツの廃棄:フォームデータ、名前=「MyControlと」

3.テキスト/平野

スペースは「+」プラスではなく、特殊な文字エンコーディングに変換します。

フォームコンポーネント

入力コンポーネント以下のプロパティを使用することができ、ユーザからのデータを受信するための、

図1に示すように、型の型設定モジュール

テキスト行のテキストボックスの
パスワードパスワードボックス、入力の内容がブロックされます。
チェックボックスボックスは、デフォルトで選択checkedプロパティを使用して提出した部品の値のプロパティ値を記述するために使用する必要があります。
ラジオラジオボタンがデフォルトで選択checkedプロパティを使用して提出した部品の値のプロパティ値を記述するために使用する必要があります。すべてのコンポーネントがその都度一成分のみ選択されたボタン群がその結果、同じ名前の値を有するべきであるラジオボタングループ
のボタン提出提出
リセットするリセットボタン
ファイルのファイルボタンを、選択されたファイルシステムのアセンブリをファイル
隠された隠されたフィールド、コンポーネントがページに表示されませんが、その値が提出されます。
イメージ画像ボタンSRCは、画像をロードするために使用されなければならない、テキストを置き換えるために、ALTステートメントを使用します。
ボタンのプッシュボタン

図2に示すように、設定用コンポーネントタイプに名前を付けます

図3に示すように、初期化オプションを設定するための値。     

デフォルトのプロパティで選択された4、確認のラジオボタン、チェックボックス

5、無効無効コンポーネントは、無効部品の値が送信できません

6、サイズ制御電流の初期幅、ピクセル単位の幅。制御タイプは、テキスト、パスワード、文字の数を表す整数値である幅の時間でない限り、デフォルトは20です

7、MAXLENGTHは、文字を入力できる最大値を指定します。型テキスト、パスワードの管理に適しています。

フィールドセットのコンポーネントタグとコントロールWebフォームの複数をグループ化します

子要素1、無効無効filedset要素、プロパティは、フィールドセットによって影響を受けることになります

2、名前のフィールドセット要素の名前

ラベルごとにフィールドセットのタイトル

web前端开发学习Q-q-u-n:⑦⑧④-⑦⑧③-零①②,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>Title</legend>
            <input type="radio" id="radio">
            <label for="radio">click me</label>
        </fieldset>
    </form>
</body>
</html>

アセンブリ入力/ボタンボタン以下のプロパティを使用することができ、ユーザからのデータを受信するための、

Buttonコントロール

1、入力タイプ指定されたコントロールタイプ:ボタン、提出し、リセットを

2、入力名のボタン名。

3、関連する入力値ボタンの値は、名前の値と共に提出されます

アセンブリラベル以下のプロパティを使用することができる形式のアセンブリのタイトルを表示するため

図1に示すように、一貫性のあるヘッダの設定値IDを持つアセンブリのためのフォームのために、上記のコード例であるです

コンポーネントを選択し、次のプロパティを使用することができるドロップダウンリストまたはリストを示すため

1、複数のの属性サイズおよび属性複数存在する場合、選択要素は、プロパティのサイズと複数のプロパティが含まれていない場合、フォームタイプはメニュー(コンボボックス)として表示され、複数の選択が許可されているか否かを示す制御タイプを示すブール値を指定しました1つのフォームタイプは、リストボックスとして表示されます。

ディスプレイのサイズは、サイズが同時に表示される行数を示すとき、のリストをスクロールすることができる場合、図2に示すように、行の数を表すことにします。デフォルト値は0です。これは、非リスト表示を表し、

3、無効無効コンポーネントは、無効部品の値が送信できません

図4は、名前が一緒に提出されたフォームデータの他のキーとの組成の組み立て、値オプションサブ要素値の名前を指定します

アセンブリオプションのオプションを示すため、多くの場合、次のプロパティで提供されている、<OPTGROUP>、<select>の含めます

1、無効無効コンポーネントは、無効部品の値が送信できません

図2に示すように、制御値の初期値を定義します。フォームが送信されると、初期値がサーバーに送信されます。

3、選択したオプションがデフォルトで選択されていることを示し

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <select name="address" id="">
            <option value="北京" disabled>北京</option>
            <option value="上海" selected>上海</option>
            <option value="广州">广州</option>
        </select>
    </form>
</body>
</html>

OPTGROUPアセンブリしばしば<選択>に含まれる指示のためのオプショングループオプションは、次のプロパティで利用可能です

1、無効無効コンポーネントは、無効部品の値が送信できません

2、ラベルは、オプショングループの名前を示します

3、選択したオプションがデフォルトで選択されていることを示し

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <select name="address" id="">
            <optgroup label="广东省">
                <option value="广州">广州</option>
                <option value="深圳">深圳</option>
            </optgroup>
            <optgroup label="江苏省">
                <option value="苏州">苏州</option>
                <option value="盐城">盐城</option>
            </optgroup>
        </select>
    </form>
</body>
</html>

TextAreaコンポーネント複数行のテキストボックスを表すために使用さは、タグの属性として使用することができる値が含まれていない属性値が存在しません

1行は、テキストボックスの行数を定義しました

2、テキストボックスに定義された列のCOLS数

図3は、反りをラップするかどうかを示します

  •オフではないラップ

  •ハード自動ハードキャリッジリターン、ラインフィードの要素が一緒にサーバに転送されます

  •ソフト自動ソフトキャリッジリターン、改行要素がサーバーに送信されません

4、無効無効成分は、無効成分値を送信することができません

図5は、読み取り専用のコンポーネントが読み取り専用で、その値はまだ提出されることを示しています

図6に示すように、名前は、コンポーネントの名前を指定するために使用され、その値と共に背景に提出されます

新規フォームコンポーネント

成分進行属性は、以下のプログレスバーで一般的に使用することができるタスクの完了を示します

1、最大ペース作業要素必要なタスクは、デフォルト値は1です

図2に示すように、ワークの値定義された量は、最大値が1である場合、この値は0と1の間の小数の間である必要があり、完了しています。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <progress value="70" max="100"></progress>
    </form>
</body>
</html>

出力コンポーネント、次のプロパティが利用可能であるユーザアクションによって生成された結果を表します

1、名前名定義された要素

図2は、他の要素のIDリストのために、これらの要素は、入力値(または他の効果)を計算することを条件とします。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="" oninput="result.value=parseInt(a.value)+parseInt(b.value)">
        <input type="range" name="b" value="50">+
        <input type="number" name="a" value="10">=
        <output name="result"></output>
    </form>
</body>
</html>

メータ素子が所定の範囲内の値の数を表します。プログレスバーを提示し、同様の効果があります

たとえば、次のようになどのディスク使用量、投票への候補者の合計数の割合投票率有権者、

1、値:要素は、特に指定されない場合、デフォルト値は1であり、minとmaxとの間の実際の値で表され

2分:デフォルトの使用を可能にするために所定の範囲を指定する最小値はゼロであります

3、最大:所定のデフォルトを使用して指定された許容範囲の最大値は1であります

4、低い所定範囲の下限値未満であるか、またはプロパティの高い値に等しくなければなりません

図5に示すように、高い(平均値のより高いリスクを示す)が所定の範囲の上限

6、最適:最高値

web前端开发学习Q-q-u-n: ⑦⑧④-⑦⑧③-零①②,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>He got a <meter low="69" high="80" max="100" value="70">B</meter>on this exam</p>
</body>
</html>

アセンブリデータリスト利用可能なコントロールの別の値を示し、データリスト<オプション>によって子要素として存在する値

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <label for=""> choose a browser from this list:</label>
    <input type="text" name="myBrowser" list="browsers">
    <datalist id="browsers">
        <option value="Chrome">
        <option value="Firefox">
        <option value="Internet Explorer">
        <option value="Opera">
        <option value="Safari">
        <option value="Microsoft Edge">
    </datalist>
</body>
</html>

新しいフォームのプロパティ

タイプ:H5では、入力の種類が拡張されている、あなたはより多くの価値を持つことができます

1、日付コントロールの日付(年、月、日、時間は含まれていません)

2、日時ローカル日時制御

3、タイムタイムコントロール

4月の日付のプラグイン(年、月)

5、週プラグイン日(年、週)、注:上記のみすることができ、クロム、オペラのサポート

図6に示すように、デジタル制御(数字のみ)の数

7、レンジ制御範囲(値がストリップを制御することによって調整することができます)

8、検索コントロールを検索し、

9、TEL電話のコントロール

10、URLアドレス制御

11、色カラーコントロール

12、電子メール、電子メールコントロール

おすすめ

転載: blog.51cto.com/14592820/2464372