[フロントエンドの研究ノートのday12] 2.8。HTMLフォーム

2.8。HTMLフォーム

htmlフォーム

フォームは、ユーザ入力の収集異なるタイプに使用され、以下のように、ラベル、タグ、および関連する属性の異なる種類の構成形態が使用されます。

1、フォーム全体領域定義ラベル

• action属性は、アドレスを送信されたフォームデータを定義します
• ウェイmethod属性は、一般的に「獲得」方法と「ポスト」モード、フォーム送信を定義します

2、ラベルのフォーム要素定義されたテキスト注釈

図3に示すように、ラベルフォーム要素は、共通の定義します

• タイププロパティ
  • タイプ=「テキスト」が定義されて単一行のテキスト入力ボックス
  • パスワード入力ボックスを定義するタイプ=「パスワード」
  • タイプ=「ラジオ」が定義されているラジオボタン
  • タイプ=「チェックボックス」チェックボックスが定義されています
  • タイプ=「ファイルは、」ファイルをアップロードするために定義されています
  • タイプ=の定義を提出するボタン「を提出します」
  • 定義をリセットするタイプ=「リセット」ボタン
  • 一般的なボタンを定義するタイプ=「ボタン」
  • =「画像」が絵のように定義されたタイプのsrc属性精細画像アドレスと、送信ボタンを
  • TYPE =「隠し」の値を格納するために使用される隠しフォームフィールドを定義します
• フォーム要素で定義された値属性
• name属性は、データを送信するときに、この名前がキーの名前で、フォーム要素の名前を定義します

4、ラベル定義複数行のテキスト入力ボックス

図5に示すように、タグ要素は、ドロップダウンメニューを定義

6、タグやラベルフィット、ドロップダウンオプションで定義されたフォーム要素

登録フォームのインスタンス：

<form action="http://www..." method="get">
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
<p>
<label>密码：</label><input type="password" name="password" />
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>个人描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍贯：</label>
<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<!-- input类型为submit定义提交按钮  
     还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如：
     <input type="image" src="xxx.gif">
-->
<input type="reset" name="" value="重置">
</p>
</form>