フォームラベル
次の図に示すように、Webサイトでよく使用するログインおよび登録機能はフォームで記述されています。
一般に、フォームは次の3つの部分で構成されます。
①フォームフィールド：フォームフィールドは、フォームパーツ全体を保持するために使用されるコントロールに相当します。フォームフィールドがない場合、フォーム内のデータはバックグラウンドサーバーと対話できません。
②フォームコントロール：コントロールとは、テキスト入力ボックス、パスワード入力ボックス、チェックボックス、送信ボタン、リセットボタンなど、フォームのさまざまな機能項目を指します。
③プロンプト情報：ユーザーが使いやすいプロンプトテキストの説明を指します。
上の図のフォームでは、次の図に示すように、3つの部分に分割し
ます。一般的に使用されるいくつかのフォームコントロールを見てみましょう。
入力コントロールはラベルで表さ
れ<input />ます。これは単一のラベルです。次の図に示すように、入力ラベルには多くの属性があります。
最も重要なものは、さまざまなコントロールタイプを指定するために使用されるtype属性です。それらを1つずつ見ていきましょう。コードにはコメントがあります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单input 控件演示</title>
</head>
<!-- type=text 这是一个文本框
size 属性是文本框的长度
value 是文本框中的默认值 -->
用户名：<input type="text" size="20" value="abc" /> <br /> <br />
<!-- type=password 这是一个密码框
maxlength 是文本框中能输入的字符的最大长度-->
密 码：<input type="password" size="21" value="123" maxlength="6" /> <br /> <br />
<!-- input 控件的下面这种写法实际上两组控件，
这种情况下男女两个选框可以同时选择，这一般不是我们想要的效果 -->
性别1：<input type="radio" /> 男
<input type="radio" /> 女 <br /> <br />
<!-- 为了使得男女两个选框只能选择其中一个，我们需要将这两个input 控件变成一组控件，可以使用name 属性。
如下面这种写法，下面的两个input 控件的name 属性的值都是 sex，
这时这两个控件就是同一组控件，男女两个选框就只能选择一个 -->
性别2：<input type="radio" name="sex" checked /> 男 <!-- checked 属性表示默认选中的组件，这里默认选中“男” -->
<input type="radio" name="sex" /> 女 <br /> <br />
<!-- type=checkbox 是复选框，可以同时选择多个 -->
爱 好：<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 唱歌
<input type="checkbox" name="hobby"> 踢球 <br /> <br />
<!-- type=button 是一个搜索按钮，可以用鼠标点击
value 是按钮上显示的文字-->
这是一个搜索按钮：<input type="button" value="我是搜索按钮" /> <br /> <br />
<!-- type=submit 是一个提交按钮，可以用鼠标点击 -->
这是一个提交按钮：<input type="submit" value="我是提交按钮" /> <br /> <br />
<!-- type=reset 是一个重置按钮，可以用鼠标点击 -->
这是一个重置按钮：<input type="reset" value="我是重置按钮" /> <br /> <br />
<!-- type=image 是一个图片按钮，可以用鼠标点击，用src 属性设置图片的地址 -->
这是一个图片按钮：<input type="image" src="https://www.baidu.com/img/baidu_jgylogo3.gif" /> <br /> <br />
<!-- type=file 用于上传文件 -->
这个用于上传文件：<input type="file" /> <br />
</body>
</html>
次の図は、コードと効果に対応しており、より便利に見えます。
ラベルラベル
ラベルラベルは通常、入力ラベルと組み合わせて使用され、役割を果たすことができます。入力ボックスの横にあるテキストをクリックすると、次のことができます。入力入力もクリックしますボックスと同様に、入力ボックスをロックします。以下は、説明するための例です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lable 标签演示</title>
</head>
<!-- 用label 标签将文字说明和input 标签都包住，这时，
当点击“用户名” 三个字时也就相当于点击了input 框 -->
<label>
用户名：<input type="text" />
</label>
<br />
<!-- 可以通过label 标签中的for 属性，与input 标签中的id 属性配合使用，
来将label 标签与 input 标签绑定起来，下面代码的效果与上面的效果是一样的 -->
<label for="aname">
用户名：<input type="text" id="aname" />
</label>
</body>
</html>
効果は次のとおりです
。textareaコントロール
textareaコントロールはテキストフィールドであり、次の図に示すように、複数行のテキストを入力できます。
以下のコードで簡単に説明しましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>textarea 标签演示</title>
</head>
<body>
这是一个留言板：
<textarea>输入留言</textarea>
</body>
</html>
効果は以下の通りです
ドロップダウンメニュー
ドロップダウンメニューは<select></select>ラベルで表され、その構文形式は次のとおりです。
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
下面通过代码举例说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单演示</title>
</head>
<body>
你在北京哪个区：
<select>
<option>选择所在北京的区</option>
<option>海淀区</option>
<option>朝阳区</option>
<option selected>昌平区</option> <!-- 可以通过select 属性来选择默认的显示 -->
<option>大兴区</option>
<option>通州区</option>
</select>
</body>
</html>
効果は次のとおりです。
フォームフィールド
フォームフィールドは、フォームのスコープを制御するフォームタグで表されます。各フォームはフォームフィールドに配置する必要があります。フォームタグでラップされたフォームタグは、バックグラウンドに送信できます。上記で説明したすべてのフォームタグは、フォームタグに配置して、バックエンドサーバーに送信できます。
フォームタグの構文形式は次のとおりです。
<body>
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
</body>
フォームタグの一般的に使用される属性は、アクション、メソッド、および名前の属性であり、以下に順番に説明されています。
①アクション：フォーム情報の送信先のURLアドレスを指定します。
②方法：フォームデータの送信方法を指定するために使用され、getとpostの2種類があります。
③name：同じページ上の異なるフォームを区別するためにフォームの名前を指定するために使用されます。