フォーム要素の簡単な実装コードでは登録を例に挙げています

コード実装:

コードをコピー

コードは次のとおりです。

<!DOCTYPE html>
<ヘッド>
<title> 新しいドキュメント </title>
<meta name="ジェネレータ" content="EditPlus">
<meta name="著者" content="">
<meta name="キーワード" content="">
<meta name="説明" content="">
<メタ文字セット="utf-8">
<スタイルタイプ="text/css">
div{ 幅:35%; 左余白:32%;}
</スタイル>
</head>
<本文>
<div>
<form class="f1" action="http://www.baidu.com" method="get" >
<フィールドセット>
<legend>登録フォーム</legend>
<テーブルの幅=100%>
<t本文>
<tr ><td class="left" width=40% align="right"><label for="t1">名前:</label></td>
<td class="right"><input type="text" id="t1" name="名前"></td>
</tr>
<tr><td class="left" width=40% align="right"><label for="Password1">パスワード:</label></td>
<td class="right"><input id="Password1" type="password" name="パスワード" /></td>
</tr>
<tr><td class="left" width=40% align="right"><label for="e1">Eメール:</label></td>
<td class="right"><input type="email" id="e1" name="youxiang" ></td>
</tr>
<tr><td class="left" width=40% align="right"><label for="1">性別:</label></td>
<td class="right"><input type="radio" id="1" name="ssex" value="nan" />男性
<input type="radio" id="2" name="ssex" value="nv" />女性
</td>
</tr>
<tr><td class="left" width=40% align="right">地域:</td>
<td><select id="selc" name="場所">
<option value="quanzhou">泉州</option>
<option value="xiamen">厦門</option>
<option value="zhangzhou" >漳州</option>
</選択>
</td>
</tr>
<tr><td class="left" width=40% align="right"><label for="txtarea">はじめに:</label></td>
<td><テキストエリアid="txtarea"></テキストエリア></td>
</tr>
<tr><td class="left" width=40% align="right">興味:</td>
<td><input type="checkbox" id="cbox1" name="dushu" value="c1">読む
<input type="checkbox" id="cbox2" name="yundong" value="c2">スポーツ
<input type="checkbox" id="cbox3"name="chihe" value="c3">食べる、飲む
</td>
</tr>
<tr><td class="left" width=40% align="right">アップロード:</td>
<td> <input type="file" id="f1" name="shangchuan" value="File1" /></td>
</tr>
<tr><td class="left" width=40% align="right" rowspan=2>
<input id="Submit1" type="submit" value="送信" />
</td>
<td> <input id="Reset1" type="reset" value="リセット" />
</td>
</tr>
</tbody>
</テーブル>
</フィールドセット>
</フォーム>
</div>
</本文>
</html>

コードラベルによって実装された機能は、テキストをクリックしたときにマウスが自動的にテキストボックスにフォーカスするようにすることであることに注意してください。

コードをコピー

コードは次のとおりです。

<<: CSSはcalc()を使用して現在の表示画面の高さを取得します

>>: reduxの動作原理と使い方の説明