HTMLフォーム要素の包括的な理解

以下のように表示されます。

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns = "http://www.w3.org/1999/xhtml" >
<ヘッド>
< title >登録フォーム</ title >
</ヘッド>
<本文>
<フォームアクション= "DoFormAction.htm" >
<フィールドセットスタイル= "幅=800px" >
<凡例>以下の情報を入力して登録してください</凡例>
<表セル間隔= "0px" セルパディング= "6px" 境界線= "1px" 境界線の色= "黒" align = "中央" 幅= "600px" >
< tr >
< td align = "right" >ユーザー名: </ td >
< td > <入力タイプ= "テキスト" サイズ= "20" スタイル= "幅:150px" </td>
</tr>
< tr >
< td align = "right" >パスワード: </ td >
< td > <入力タイプ= "パスワード" サイズ= "20" スタイル= "幅:150px" </td>
</tr>
< tr >
< td align = "right" >パスワードの確認: </ td >
< td > <入力タイプ= "パスワード" サイズ= "20" スタイル= "幅:150px" </td>
</tr>
< tr >
< td align = "right" >性別: </ td >
< td >
<入力タイプ= "ラジオ" チェック済み= "チェック済み" 名前= "性別1" 値= "男性" />男性
<入力タイプ= "ラジオ" 名前= "性別1" 値= "女性" />女性
</ td >
</tr>
< tr >
< td align = "right" >性別 (テキストをクリックして選択): </ td >
< td >
<フィールドセットスタイル= "幅:150px" >
<凡例>性別を選択してください</凡例>
<入力タイプ= "ラジオ" チェック済み= "チェック済み" 名前= "セックス2" 値= "男性" id = "男性" />
<ラベル for = "man" >男性</ label >
<入力タイプ= "ラジオ" 名前= "セックス2" 値= "女性" id = "女性" />
<ラベル for = "女性" >女性</ label >
</フィールドセット>
</ td >
</tr>
< tr >
< td align = "right" >都市: </ td >
< td >
<選択名前= "都市" >
<オプション値= "北京" >北京</オプション>
<オプション value = "深セン" >深セン</オプション>
<オプション値= "上海" >上海</オプション>
<オプション値= "南昌" selected = "selected" >南昌</ option >
</選択>
</ td >
</tr>
< tr >
< td align = "right" >都市の場所: </ td >
< td >
<選択名前= "エリア" >
<オプショングループラベル= "北京" >
<オプション value = "朝陽区" >朝陽区</ option >
<オプション value = "海淀区" >海淀区</ option >
<オプション value = "その他の地区" >その他の地区</ option >
</optgroup>
<オプショングループラベル= "南昌" >
<オプション value = "東湖区" >東湖区</ option >
<オプション value = "西湖水地方" >西湖水地方</ option >
<オプション value = "青山湖地区" >青山湖地区</ option >
</optgroup>
</選択>
</ td >
</tr>
< tr >
< td align = "right" >友情の目標: </ td >
< td >
<選択名前= "ターゲット" サイズ= "3" multiple = "複数" >
<オプション値= "ピア" selected = "selected" >ピア</ option >
<オプション value = "普通の友達" >普通の友達</ option >
<オプション値= "恋人" >恋人</オプション>
</選択>
</ td >
</tr>
< tr >
< td align = "right" >趣味: </ td >
< td >
<入力タイプ= "チェックボックス" 名前= "愛" 値= "サッカー" />サッカー
<入力タイプ= "チェックボックス" 名前= "愛" 値= "青いボール" />バスケットボール
<入力タイプ= "チェックボックス" 名前= "愛" 値= "ピンポン" />卓球
</ td >
</tr>
< tr >
< td align = "right" >写真のアップロード: </ td >
< td >
<入力タイプ= "ファイル" 名前= "myPic" />
</ td >
</tr>
< tr >
< td align = "right" >自己紹介: </ td >
< td >
<テキストエリア行数= "5" 列数= "50" >
</テキストエリア>
</ td >
</tr>
< tr >
< td align = "中央" 列範囲= "2" >
<入力タイプ= "送信" 値= "OK" />
<入力タイプ= "リセット" 値= "クリア" />
<入力タイプ= "画像" src = "../images/btnreg.png" onclick = "アラート('hello')" /> <!--デモ画像ボタン（送信と同様にデータを送信します）
-->
</ td >
</tr>
</表>
</フィールドセット>
</フォーム>
</本文>
</html>