記事のディレクトリ
HTMLでは、完全なフォームは通常、フォームフィールド、フォームコントロール（フォーム要素とも呼ばれます）、プロンプト情報の3つの部分で構成されます。 使用シナリオ：エリア内のフォーム要素をバックエンドサーバーに送信します
1.フォームフィールド
<form action="url" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
1.1一般的な属性：
| 属性 | 属性値 | 効果 |
|---|---|---|
| アクション | URLアドレス | フォームデータを受信して処理するサーバープログラムのアドレスを指定するために使用されます |
| 方法 | 取得/投稿 | フォームデータの送信方法を設定する |
| 名前 | 名前 | 同じページ上の複数のフォームフィールドを区別するために、フォームの名前を指定します |
2.フォームコントロール（フォーム要素）
フォームフィールドでは、さまざまなフォーム要素を定義できます。これらのフォーム要素は、ユーザーがフォームに入力または選択できるようにするコンテンツコントロールです。
次に説明します：
- 入力フォーム要素
- ドロップダウンフォーム要素を選択します
- textareaテキストエリア要素
2.1入力入力フォーム要素
（1）タイプ属性のテキストパスワードボックス
で<input>ラベルが含まtypeに応じて、プロパティをtype属性値、入力フィールドがフォーム（いずれかの多種多様あり、テキストフィールド、チェックボックス、マスク後のテキストコントロール、ラジオボタン、ボタンなどを）。
<input type="属性值" />
- シングルラベル
- type属性は、さまざまな制御タイプを指定するためにさまざまな属性値を設定します
type属性の属性値とその説明は次のとおりです。
例：
<form>
账号：<input type="text" />
<br/>
密码：<input type="password"/>
</form>
（2）ラジオボタンとチェックボックスを実現する
タイプ属性に加えて、タグには他の多くの属性があります。一般的に使用される属性は次のとおりです。
- 名前と値は、各フォーム要素の属性値であり、主にバックエンド担当者によって使用されます。
- nameフォーム要素の名前、ラジオボタン、およびチェックボックスの名前の値は同じである必要があります。
- 主にラジオボタンとチェックボックスのプロパティをチェックしました。ページを開く際の主要な役割は、フォーム要素のデフォルトオプションになります。
- maxlengthは、ユーザーがフォーム要素に入力できる最大文字数であり、ほとんど使用されません。
<form>
账号：<input type="text" value="123456"> <br>
密码：<input type="password" value="123456"> <br>
<!-- 用radio属性实现单选，name属性值相同 -->
性别：男<input type="radio" name="1" value="男"> 女<input type="radio" name="1" value="女"> <br>
<!-- 用checkbox属性实现单选 -->
喜好：吃饭<input type="checkbox" name="eat" value="吃饭"> 睡觉<input type="checkbox" name="sleep" value="睡觉">
</form>
（3）送信ボタンとリセットボタン
<form action="xxx.php" method="post">
<!--内容会提交给后台-->
<input type="submit" value="注册">
<input type="reset">
</form>
（4）ラベル
<label>ラベルは、入力要素のラベル（ラベル）を定義します。
<label>タグはフォーム要素をバインドするために使用され<label>、タグ内のテキストをクリックすると、ブラウザは自動的にフォーカス（カーソル）して、ユーザーエクスペリエンスを向上させるために使用される対応する要素を選択または形成します。
<label>タグfor 属性はid 属性同じ要素に関連付ける必要があります。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
2.2ドロップダウンフォーム要素を選択します
使用シナリオ：ページで、ユーザーが選択できるオプションが複数あり、ページスペースを節約したい場合は、<select>ラベルコントロールを使用してドロップダウンリストを定義できます。
<select>少なくとも1つのペアが含まれています<option>。- で
<option>定義さselected =“ selected "れている場合、現在のアイテムがデフォルトで選択されているアイテムです。
<form>
籍贯：
<select>
<option select="selected">请选择</option>
<option>湖北</option>
<option>湖南</option>
<option>新疆</option>
</select>
</form>
2.3textareaテキストエリア要素
使用シナリオ：ユーザーがさらに多くのものを入力すると、フォームにテキストボックスを使用できなくなり、<textarea>ラベルを使用できるようになります。
フォーム要素では、<textarea>ラベルは複数行のテキスト入力を定義するために使用されるコントロールです。
複数行のテキスト入力コントロールを使用して、より多くのテキストを入力します。このコントロールは、掲示板やコメントで一般的です。
<textarea rows="3" cols="20">
文本内容
</textarea>
<textarea>簡単に複数行のテキスト入力ボックスのラベルを作成することができます。- cols = "各行の文字数"、rows = "表示される行数"、実際の開発では使用しません。CSSを使用してサイズを変更します。
3.大規模なサンプルアプリケーション
このような
コードを書いてください：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的诗词</title>
</head>
<body>
<h2>青春不常在，抓紧谈恋爱</h2>
<table width="600">
<!-- 性别 -->
<tr>
<td>性别</td>
<td>
<input type="radio" id="男" name="性别" value="男">
<label for="男"><img alt="男" src="男.png"6 width="16" height="16">男 </label>
<input type="radio" id="女" name="性别" value="女">
<label for="女"><img alt="女" src="女.png"6 width="16" height="16">女 </label><br>
</td>
</tr>
<!-- 生日-->
<tr>
<td>生日</td>
<td>
<select>
<option>--请选择年--</option>
<option>2000</option>
<option>2001</option>
</select>
<select>
<option>--请选择月--</option>
<option>1</option>
<option>2</option>
</select>
<select>
<option>--请选择日--</option>
<option>1</option>
<option>2</option>
</select>
</td>
</tr>
<!-- 所在地区 -->
<tr>
<td>所在地区</td>
<td><input type="text" value="北京思密达"></td>
</tr>
<!-- 婚宴状况 -->
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="婚姻" id="1"><label for="1">未婚</label>
<input type="radio" name="婚姻" id="2"><label for="2">已婚</label>
<input type="radio" name="婚姻" id="3"><label for="3">离婚</label>
</td>
</tr>
<!-- 学历 -->
<tr>
<td>学历</td>
<td><input type="text" value="幼儿园"></td>
</tr>
<!-- 喜欢的类型 -->
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox">可爱的
<input type="checkbox">小鲜肉
<input type="checkbox">都喜欢
</td>
</tr>
<!-- 自我介绍 -->
<tr>
<td>自我介绍</td>
<td>
<textarea rows="3" cols="20">
自我介绍
</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="免费注册">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked">我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td></td>
<td>
<a href="www.baidu.com">我是会员，立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h2>我承诺</h2>
<ul>
<li>年满18岁，单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
比較：
