フォームのプロパティを設定するHTMLフォーム、単一行のテキスト、パスワードボックス、ラジオボタン、チェックボタン、プッシュボタン、リセットボタン、送信ボタンを、イメージドメイン、ファイル・ドメイン、非表示フィールド、ドロップダウンリストの項目、フィールドのセット、ラベルを作成します。
フォームの作成
で作成したフォーム<body></body>タグ
<body>
<form>
</forrm>
</body>
3つの共通の属性を形成します
1、アクション：デーモンによって処理されるというフォーム
2、方法：デーモンプロセスにどのモードで提出指定データ
のデータの方法=「GET」、比較的少量公開するアドレスバーに提出されたデータを送信するために使用される
データのメソッド=「ポスト」比較的大量ではありませんそれがポストに適応するための最良の形態を提出した機密データを公開するためにアドレスバーに提出されたデータ
3、ENCTYPE：ファイルのアップロード、その後、設定されたプロパティ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="yzc.php" method="post" enctype="multipart/form-data"></form>
<!--action=""指名表单由哪一个后台程序处理-->
<!--method=""指名数据以哪一种模式提交给yzc.php处理-->
<!--method="post" 数量比较大的数据 不会在地址栏暴露出提交的数据 所以在提交敏感性数据最好适应post模式-->
<!--method="get" 用于提交比较小量数据 会在地址栏暴露出提交的数据-->
<!--enctype="multipart/form-data" 文件上传的话设置该属性-->
</body>
</html>
単一のテキストボックス、パスワードボックス、複数行のテキストボックスを作成します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<!--单行文本输入框-->
<input type="text" />
<hr />
<!--单行密码框-->
<input type="password" />
<hr />
<!--文本框和密码框不同是密码框显示的是星号*的掩码-->
<!--多行文本框架 按回车键可以输入下一行-->
<textarea >
</textarea>
<hr />
<!--多行文本款也可以设置大小-->
<textarea cols="50" row="15">
</textarea>
<!--cols="50" 设置宽度-->
<!--row="15" 设置高度-->
</form>
</body>
</html>
実行後、以下の
ラジオボタンとチェックボタンの作成
ラジオボタンは、選択場合、同じグループ内の複数のオプションを設定するために使用される
同一のグループのみ選択倍数に設定された複数のオプションを使用チェックボタンを
<!--单选按钮用于设置同一分组内的多个选项里只能选择一个-->
<!--复选按钮用于设置同一分组内的多个选项里只能选择多个-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--单选按钮-->
<input type="radio" name="xb" />男
<br />
<input type="radio" name="xb" />女
<!--上面两个name都等于"xb"属于同一个分组，单选按钮同一分组只能选一个 -->
<hr />
<!--复选按钮-->
<input type="checkbox" name="aihao" />篮球
<input type="checkbox" name="aihao" />足球
<input type="checkbox" name="aihao" />跑步
<input type="checkbox" name="aihao" />听音乐
<input type="checkbox" name="aihao" />唱歌
<input type="checkbox" name="aihao" />跳舞
<input type="checkbox" name="aihao" />其他
</body>
</html>
次のように実行結果があります
プッシュボタンとリセットボタンを作成します。
リセットボタン：リセットボタンはデフォルト値または空の形での要素の値を設定します
<!--重置按钮：重置按钮将表单内的元素的值设置为默认的值或者清空-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<!--普通按钮-->
<input type="button" value="我是普通按钮" />
<!--此按钮没有任何作用，需要后期学习js和jquery后赋予按钮各种功能-->
<hr />
<input type="text" />
<br />
<br />
<input type="reset" value="重置" />
</form>
</body>
</html>
次のように実行結果があります
送信ボタンと画像のドメインを作成します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<!--提交按钮-->
<input type="text" />
<input type="submit" value="提交" />
<!--图像域-->
<input type="image" src="../images/qh2.jpg" height="120" width="120" />
<!--图像域也有提交的功能 src=" "是图像的存放的路径-->
</form>
</body>
</html>
ファイルのフィールドと隠しフィールドを作成します。
フィールドは、ファイルを実行するために使用されたファイルを選択し、ローカルファイルのアップロード
、いくつかの値の格納値に隠されたフィールドをが、ボタンの背景のための一般的な手順は、それが実際にウィンドウ内に存在は表示されません表示されません。
<!--文件域用于选择本地文件执行文件上传-->
<!--隐藏域用于存储一些值但却不要显示的值 一般用于后台程序 该按钮并不会显示在窗口中 但它确确实实存在 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<!--文件域-->
<input type="file" />
<!--隐藏域-->
<input type="hidden" value="192.188.136.21" />
<!--该按钮并不会显示在窗口中 但它确确实实存在 并且存储了这个IP地址-->
</form>
</body>
</html>
ドロップダウンリストの項目を作成します。
ドロップダウンリストの項目：ユーザーが良いプロジェクトの事前列に彼らが望むコンテンツを選択することができます
<!--可以让用户在提前列好的项目中选择自己想要的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<select>
<option>马鞍山</option>
<option>滁州</option>
<option>安庆</option>
<option>宣城</option>
<option>芜湖</option>
</select>
<hr />
<!--可以为下拉列表项设置选择多个-->
<select multiple="multiple" size="2">
<option>马鞍山</option>
<option>滁州</option>
<option>安庆</option>
<option>宣城</option>
<option>芜湖</option>
</select>
<hr />
<!--可以设置某个项是默认选择项 这里默认选择滁州-->
<select>
<option>马鞍山</option>
<option selected="selected" >滁州</option>
<option>安庆</option>
<option>宣城</option>
<option>芜湖</option>
</select>
</form>
</body>
</html>
次のように実行結果があります
フォーム要素の共通属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<!--设置默认值-->
<input type="text" value="我是默认值" />
<hr />
<!--value用于按钮时显示到按钮上面去了-->
<input type="button" value="我是按钮">
<hr />
<!--只读属性 文本框里面的文字不能修改-->
<input type="text" value="我是默认值" readonly="readonly" />
<hr />
<!--设置让元素失效-->
<input type="text" disabled="disabled" />
<hr />
<!--设置输入最大长度内容是多少 这里设置的长度是6位-->
<input type="text" maxlength="6" />
<hr />
<!--在单选按钮中使男默认选中-->
<input type="radio" checked="checked" name="xb" />男
<input type="radio" name="xb" />女
<hr />
<!--在复选按钮中使足球和羽毛球默认选中-->
<input type="checkbox" />篮球
<input type="checkbox" checked="checked"/>足球
<input type="checkbox" checked="checked"/>羽毛球
<input type="checkbox" />乒乓球
<input type="checkbox" />手球
</form>
</body>
</html>
次のような結果の実装があります
フィールド、ラベルのセットを作成します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<fieldset>
<legend>基本信息</legend>
<!--字段集的标题是基本信息-->
<input type="text" />
<input type="radio" name="xb"/>男
<input type="radio" name="xb"/>女
<input type="text" />
</fieldset>
<br />
<br />
<fieldset>
<legend>详细信息</legend>
<!--用标签 <label></label>进行设置说明性文本-->
<label>用户名称 <input type="text" /></label>
<label>性别 <input type="radio" name="xb"/></label>男
<input type="radio" name="xb"/>女
<label>用户地址 <input type="text" /></label> </fieldset>
</form>
</body>
</html>
次のように実行結果があります
