海创软件组--20200712-HTML各类表格详情分析
程序员文章站
2024-03-25 22:51:16
...
界面效果
一些框的属性
文本框的type=text,密码框的type=password，提交框的type=submit，单选按钮type=radio，多选框type=checkbox
单选按钮和多选框默认选中加一个checked=“checked”
下拉表格的不同处
但是下拉表格就不一样了
name给后台使用
name是为了给后台使用的
多选框
多选框也类似
使用label点击文字选中
使用label之后点击文字之后可以选中，并且要设置id
对表单进行分组
完整代码
<body>
<form action="target.html">
<fieldset>
<legend>用户信息</legend>
<label for="um">用户名</label>
<input id="um" type="text" name="username" /> <br /><br />
<label for="pwd">密码 </label>
<input id="pwd" type="password" name="password" /> <br /><br />
</fieldset>
<fieldset >
<legend>用户爱好</legend>
性别 <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
<input type="radio" name="gender" value="female" checked="checked" id="female" /><label for="female">女</label>
<br /><br />
爱好 <input type="checkbox" name="hobby" value="zq" />足球
<input type="checkbox" name="hobby" value="lq" />篮球
<input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球
<input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球
<br /><br />
</fieldset>
你喜欢的明星
<select name="star">
<optgroup label="女明星">
<option value="fbb">范冰冰</option>
<option value="lxr">林心如</option>
<option value="zw">赵薇</option>
</optgroup>
<optgroup label="男明星">
<option value="zbs" selected="selected">赵本山</option>
<option value="ldh">刘德华</option>
<option value="pcj">潘长江</option>
</optgroup>
</select>
<br /><br />
自我介绍 <textarea name="info"></textarea>
<br /><br />
<input type="submit" value="注册" />
<input type="reset" />
<input type="button" value="按钮" />
<br /><br />
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
</body>