黑马程序员技术交流社区

标题: 关于HTML中form自定义重置的问题 [打印本页]

作者: yasyas001 时间: 2013-6-19 10:19
标题: 关于HTML中form自定义重置的问题
本帖最后由 yasyas001 于 2013-6-23 13:52 编辑

主要是重置单选框的时候,如性别男女
在使用提供的重置<input type="reset">可以把选择的男或女取消选中,,
可是我自定义的话,怎么弄呢,

作者: 陈志强 时间: 2013-6-19 14:42
按照楼主的意思，单选框其实不是这样的思想，比如性别可以这样写
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
原因是因为在html中单选框用的是radio，如果想要只选择一个的话，可以使两个按钮的name属性是一致的，
那样的话可以使两个按钮的关系互斥，那么就会只能选择其中的一个了……

另外，如果是要重置信息的话，并且是要给按钮进行自定义的信息的话，也可以使用value的形式，如：
<input type="reset" value="重置"/>
同样这样的标签都是在单元格的里面完成的，希望能够帮到楼主

作者: yasyas001 时间: 2013-6-19 16:26

陈志强发表于 2013-6-19 14:42
按照楼主的意思，单选框其实不是这样的思想，比如性别可以这样写
男
女

额,还不是我要的结果,我是说我自定义重置按钮,当我在点击它的时候,我选择的男或女的框会被取消掉,就是说我一开始,男和女都没有被选中,我就选择了一个,,然后我去点击重置,这样我选中的那个又变回没有被选中的状态,
就是这个重置的条件怎么弄

作者: 陈志强 时间: 2013-6-19 20:11
我一开始,男和女都没有被选中,我就选择了一个,,然后我去点击重置,这样我选中的那个又变回没有被选中的状态,

只要设置reset就可以了啊，<input type="reset" value="重置"/>比如这般……

你可以试下这份代码，就是这样的效果……

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form action="sueesed.html" method="get">
<fieldset>
<legend>表单注册</legend>
<table border="1" width="50%" cellspacing="2" cellpadding="2">

<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="radio" name="gender" value="male" />
男
<input type="radio" name="gender" value="female" />
女 </td>
</tr>
<tr>
<td> 专业爱好： </td>
<td>
<input type="checkbox" name="like" value="java" />
java
<input type="checkbox" name="like" value="spring" />
spring
<input type="checkbox" name="like" value="html5" />
html
<input type="checkbox" name="like" value="jsp" />
jsp </td>
</tr>

<tr>
<td> 选择城市： </td>
<td>
<select>
<option value="">请选择你的城市：</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
</select></td>
</tr>
<tr>
<td> 上传照片： </td>
<td>
<input type="file" value="myLife"/>
</td>
</tr>
<tr>
<td> 自我介绍： </td>
<td>
<textarea cols="40" rows="10"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>

作者: 爪哇攻城狮 时间: 2013-6-20 10:20
我明白你的意思，reset是重置所有了。你是想单独重置男女选项。那就只能用js控制了。

作者: 袁梦希 时间: 2013-6-20 11:05
加油楼主

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2