フォームのラベルとフォームコントロール

フォームラベルの定義と使用

HTMLでは、タグは、ユーザー入力用のHTMLフォームを使用して作成され、Webページに共通している、など：登録とログインページ達成するためのフォームを使用することです。

一般に、3つの部品は、情報及びフォームフィールドを構成することを示唆している（また、フォーム要素として知られている）形式で完全な制御を形成します。
ここに画像を挿入説明
タグは、典型的には、<入力>、<ボタン>などのインタラクティブコントロール（テキストフィールド、チェックボックス、ラジオボタン、など、ボタンを提出）、種々のを定義するために使用されるフォームのサブ要素の多くを有し、 <選択>、<TEXTAREA >や他のラベル。

フォームコントロール：

このような単一行のテキスト入力ボックス、パスワード入力ボックス、チェックボックスなど、実際のフォーム機能項目は、ボタン、リセットボタンなどを提出含まれています。

メッセージ：

フォームは、通常、説明のテキストを含める必要があり、そしてフィル操作を促します。

フォームフィールド：
共通の属性：

アクション
フォームの情報が収集され、情報はaction属性を受信して処理プログラムのURL形式のデータへのサーバーのアドレスを指定し、処理するためにサーバに渡される必要があります。
この方法は、
その値またはポストを取得する方法を設定するためのフォームデータを送信します。
名前は
同じページの複数のフォームを区別するために、フォームの名前を指定します。

注：各フォームには独自のフォームフィールドを持っている必要があります。

<form action="提交地址" method="提交方式">
表单内容
</form>

彼は、メッセージ、フォームのコントロールのすべてを受信するためのコンテナとして機能、方法は彼のフォームデータ定義処理プログラムのURLアドレスでサーバーに送信し、データをすることができます。あなたがフォームフィールドを定義しない場合、フォームデータは、バックエンドサーバへ転送することはできません。

入力コントロール

単一ラベルの入力タグは、タイプは、その値は、さまざまな、指定されたコントロールの異なるタイプに使用その最も基本的な属性を、属性。type属性に加えて、あなたは一般的な性質は、次の表に示されていることを他の多くの属性で定義されてもよいです。
タイプは、これらの形式について説明し
ここに画像を挿入説明
、それがグループの場合はラジオを、私たちは、あなたが複数のそれらを選択達成することができるようにそれらに同じ名前の名前の名前を付ける必要があります。

ラベルlabel

入力要素のラベルタグは、ラベル（タグ）を定義します。
アクションテーブル：要素は、ラベルは、バインドされたフォーム要素が入力フォーカスを取得しますと、フォームをバインドするラベルをクリックするために使用されます。

要素を結合させる方法は？

属性のフォーム要素が結合されてラベルを指定します。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

TextAreaコントロール（テキストフィールド）

テキスト、テキストボックスには、それだけにテキストの1行を書くことができる
テキストエリアのテキストフィールドを
使用すると、多くの情報を入力する必要がある場合、あなたは<TEXTAREA> </ TEXTAREA>タグを使用する必要があります。あなたは簡単にその基本的な構文で複数行のテキスト入力ボックスのtextareaコントロールを作成することができ、次のとおりです。

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

ドロップダウンメニュー

選択コントロールで定義されたドロップダウンメニュー

<select>
  <option selected =" selected ">选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

注意：

<オプション> </オプション>の少なくとも一対を含んでいなければなりません。</ select>の<選択>。
あなたが選択した=オプションで「選択」を定義すると、現在選択されているアイテムは、デフォルトのアイテムです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="#" type="text/CSS">
    <title>表单</title>
</head>
<body>
    <table height="700" width="600" align="center" border="0" cellspacing="0" cellpadding=
    "0">
        <caption><h2>账号注册界面</h2></caption>
            <tbody>
                <form action="url地址" method="提交方式" name="表单名称">
                <tr>
                    <td>性别</td>
                    <td>
                        男<input type="radio" checked="checked" name="sex">
                        女<input type="radio" name="sex">
                    </td>
                </tr>
                <tr>
                    <td>生日</td>
                    <td>
                        <select>
                            <option value="">请选择年</option>
                            <option value="">1995</option>
                            <option value="">1996</option>
                            <option value="">1997</option>
                            <option value="">1998</option>
                            <option value="">1999</option>
                            <option value="">2005</option>
                            <option value="">2006</option>
                            <option value="">2007</option>
                            <option value="">2008</option>
                            <option value="">2009</option>
                            <option value="">2010</option>
                            <option value="">2011</option>
                        </select>   
                        <select>
                            <option value="">请选择月</option>
                            <option value="">1</option>
                            <option value="">2</option>
                            <option value="">3</option>
                            <option value="">4</option>
                            <option value="">5</option>
                            <option value="">6</option>
                            <option value="">7</option>
                            <option value="">8</option>
                            <option value="">9</option>
                            <option value="">10</option>
                            <option value="">11</option>
                            <option value="">12</option>
                        </select>  
                        <select>
                            <option value="">请选择日</option>
                            <option value="">1</option>
                            <option value="">2</option>
                            <option value="">3</option>
                            <option value="">4</option>
                            <option value="">5</option>
                            <option value="">6</option>
                            <option value="">7</option>
                            <option value="">8</option>
                            <option value="">9</option>
                            <option value="">10</option>
                            <option value="">11</option>
                            <option value="">12</option>
                            <option value="">13</option>
                            <option value="">14</option>
                            <option value="">15</option>
                        </select>        
                    </td>
                </tr>
                <tr>
                    <td>所在地区</td>
                    <td>
                        <select name="" id="">
                            <option value="">北京</option>
                            <option value="">上海</option>
                            <option value="">天津</option>
                            <option value="">石家庄</option>
                            <option value="">河南</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>婚姻状况</td>
                    <td>
                        未婚<input type="radio" name="marriage" checked="checked">
                        离婚<input type="radio" name="marriage">
                        丧偶<input type="radio" name="marriage">
                    </td>
                </tr>
                <tr>
                    <td>学历</td>
                    <td>
                        <input type="text" value="小学">
                    </td>
                </tr>
                <tr>
                    <td>月薪</td>
                    <td>
                        <input type="text" value="5000-8000">
                    </td>
                </tr>
                <tr>
                    <td>手机号</td>
                    <td>
                        <input type="text" maxlength="11" value="">
                    </td>
                </tr>
                <tr>
                    <td>昵称</td>
                    <td>
                        <input type="text">
                    </td>
                </tr>
                <tr>
                    <td>喜欢的类型</td>
                    <td>
                        可爱<input type="checkbox" name="love">
                        御姐<input type="checkbox" name="love">
                        温柔<input type="checkbox" name="love">
                        贤惠<input type="checkbox" name="love">
                        辣妹<input type="checkbox" name="love">
                    </td>
                </tr>
                <tr>
                    <td>自我介绍</td>
                    <td>
                        <textarea name="" id="" cols="30" rows="10"></textarea>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="text" value="请输入验证码">
                        <input type="reset" value="刷新">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="image" src="image/btn.png">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="checkbox">
                        <strong>我同意注册条款和会员加入标准</strong>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <a href="#"><p>我有账号，立即登录</p></a>
                    </td>
                </tr>
            </form>
            </tbody>
    </table>
</body>
</html>

ここに画像を挿入説明

陳幸せな私

公開された23元の記事・ウォンの賞賛0 ・ビュー190

プライベートの手紙の懸念