html表单性别单选（HTML中的单选按钮问题）

本文目录

• HTML中的单选按钮问题
• 编写HTML注册表单, 需要字段: 用户名, 密码, 确认密码, 性别(单选), 城市(下拉列表), 兴趣爱好
• form表单内部div块隐藏显示问题 想实现点击修改后出现单选框选择性别
• 编写一个表单页面census.html，让用户填写姓名、性别（男女选择）、兴趣（运动，读书，音乐，书法及其他）
• 在html中，由单选框选择男生或者女生，然后确定，页面根据你的选择定位到男生主页或者女生主页

HTML中的单选按钮问题

value="male"，value="female" 这个是用来在后台用的，页面是不显示的，也就是说当你提交form表单
的时候，在后台程序获取值时得到的就是“male”、“female”，就是你所选的那个

编写HTML注册表单, 需要字段: 用户名, 密码, 确认密码, 性别(单选), 城市(下拉列表), 兴趣爱好

源程序如下，二级的编程序啊，我这里都有保存原题答：《html》《head》《title》HTML注册表单《/title》《/head》《body》《form action="" method="post" onsubmit="return sub()" name=form》用户名：《input type="text" name="username" value="" /》《br》密码 《input type="password" name="password" value="" /》《br》确认密码：《input type="password" name="repassword" value="" /》《br》性别：《input type="radio" name="sex" value="0" checked=”default” /》男《input type="radio" name="sex" value="1" /》女《br》城市: 《select name="city"》《option value="0"》郑州《/option》《option value="1"》上海《/option》《option value="2"》天津《/option》《option value="3"》深圳《/option》《/select》《br》兴趣爱好:《input type="checkbox" name="read" value="0" /》阅读 《input type="checkbox" name="travel" value="1" /》旅游 《input type="checkbox" name="Internet" value="2" /》上网个人简介: 《textarea rows="5" cols="30" name="readme"》《/textarea》 《br》 《input type="submit" value="提交"/》 《/form》《/body》《/html》

form表单内部div块隐藏显示问题 想实现点击修改后出现单选框选择性别

《!DOCTYPE html》
《html lang="en"》
《head》
        《meta charset="UTF-8"》
    《script type="text/javascript"》
    function change1()
    {
        document.getElementById("sex0").style.display = "none";
        document.getElementById("sex1").style.display = "block";
    }
    《/script》
    
《/head》
《body》
《div 》
 《form  action="" method="post"》
            《div》
                《span》性别《/span》
                《div class="name_control" id="sex0" style="display: block"》
                    《span class="js-before"》男《/span》
                    《input type="button" style="border:none; background:white;" onclick="change1()" value="修改" /》
                    
                《/div》
                《div class="" style="display: none" id="sex1"》
                    《label class=""》《input type="radio"  name="gender" value="1"》 男《/label》
                    《label class=""》《input type="radio" name="gender" value="0"》 女《/label》
                《/div》
            《/div》
《/form》
《/div》
《/body》
《/html》

《button》在ie下只是按钮，但在其他浏览器上是submit，submit类的按钮按下后，会进行提交，并刷新页面，所以按钮按下后页面改变一瞬间又重置了。

编写一个表单页面census.html，让用户填写姓名、性别（男女选择）、兴趣（运动，读书，音乐，书法及其他）

表单：
《form action="doservlet" method="post"》
姓名：《input name="user_name"》《br》
性别《input type="radio" value="man" name="sex"》男 《input type="radio" value="women" name="sex"》女《Br /》
爱好：《input type="check" name="likes" value="运动" /》运动
《input type="check" name="likes" value="读书" /》读书
《input type="check" name="likes" value="音乐" /》音乐
《input type="check" name="likes" value="书法" /》书法
《/form》
servlet：
iimport java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
***隐藏网址***
***隐藏网址***
***隐藏网址***
public class doservlet extends HttpServlet {
/**
* Constructor of the object.
*/
public doservlet() {
super();
}
/**
* Destruction of the servlet. 《br》
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
/**
* The doGet method of the servlet. 《br》
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out
.println("《!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"》");
out.println("《HTML》");
out.println(" 《HEAD》《TITLE》A Servlet《/TITLE》《/HEAD》");
out.println(" 《BODY》");
out.print(" This is ");
out.print(this.getClass());
out.println(", using the GET method");
out.println(" 《/BODY》");
out.println("《/HTML》");
out.flush();
out.close();
}
/**
* The doPost method of the servlet. 《br》
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String name = null;
String sex = null;
String likes = null;
name=request.getParameter("user_name");
sex=request.getParameter("sex");
likes=request.getParameterValues("likes");
request.getSession().setAttribute("user_name", name);
request.getSession().setAttribute("sex", sex);
request.getSession().setAttribute("like",likes);
//把请求过来的数据放在session里
response.sendRedirect("目的页");
//在目的页中通过session的 getAttribute方法取出来即可
out.flush();
out.close();
}
/**
* Initialization of the servlet. 《br》
*
* @throws ServletException if an error occure
*/
public void init() throws ServletException {
// Put your code here
}
}

在html中，由单选框选择男生或者女生，然后确定，页面根据你的选择定位到男生主页或者女生主页

我来修改下楼上的代码
《select id = "sex"》 《option value="nan"》男《/option》 《option value="nv"》女《/option》 《/select》
《input type="button" value="确定" onclick="go();"》
《script》
function go(){
var sex = document.getElementById("sex").value;
if(sex==’nan’)
window.location = "./nan.html";
}else{
window.location = "./nv.html";
}
《/script》
ok了。。。