ホームページ > 記事 > ウェブフロントエンド > HTML Forms_html/css_WEB-ITnose のさまざまな入力コントロール
HTML Forms_html/css_WEB-ITnose のさまざまな入力コントロール
- WBOYオリジナル
- 2016-06-24 11:17:301226ブラウズ
フォームの入力コントロールは主に入力と選択です。入力には、type 属性を通じて定義される複数のタイプを指定できます。type の可能な値は、text、radio、checkbox、password、submit、reset です。
select は、option と組み合わせて使用されます。バックグラウンドがフォームの値を取得したい場合は、name 属性の値を通じてユーザーの入力を取得します。
バックグラウンドで取得される値:
input-text-name
input-redio-name-value
input-checkbox-name-value
input-password-name
input-textarea-name
select-option-name-value
以下は、登録フォームを形成するためのこれらの包括的な適用です。
<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title></title></head><body> <center> <h1 style="color:blue;">注册表单</h1> <hr/> <form name="reg" action="regsuccess.html" method="post"> <table cellspacing="0" cellpadding="0" border="0"> <tr> <td>用户名:</td> <td><input type="text" name="username"/></td> </tr> <tr> <td>密码：</td> <td><input type="password" name="pwd"/></td> </tr> <tr> <td>确认密码：</td> <td><input type="password" name="confirmpwd"/></td> </tr> <tr> <td>电子邮箱：</td> <td><input type="text" name="email"/></td> </tr> <tr> <td>性别：</td> <td><input type="radio" name="gender" value='1' checked/>男<input type="radio" name="gender" value='0'/>女</td> </tr> <tr> <td>学历：</td> <td> <select name="edulevel"/> <option value="-1">--请选择学历--</option> <option value="0">小学</option> <option value="1">初中</option> <option value="2">高中</option> <option value="3">学士</option> <option value="4">硕士</option> <option value="5">博士</option> <option value="6">博士后</option> </td> </tr> <tr> <td>爱好：</td> <td> <input type="checkbox" name="hoby" value="reading"/>读书 <input type="checkbox" name="hoby" value="movie"/>电影 <input type="checkbox" name="hoby" value="shopping"/>购物 <input type="checkbox" name="hoby" value="internet"/>上网 <input type="checkbox" name="hoby" value="other"/>其他 </td> </tr> <tr> <td>上传头像：</td> <td><input type="file"/></td> </tr> <tr> <td>服务协议：</td> <td><textarea rows="10" cols="40">rule 1</textarea></td> </tr> <tr> <td>是否接受协议：</td> <td><input type="checkbox"name='rule'value='accept'/>接受</td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="注册"> <input type="reset" value="重置"/></td> </tr> </table> </form> </center></body></html>
表示効果は次のとおりです:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。