java性别单选框如何获取选择内容 javaweb性别选项设置

转载

mob64ca14154457 2023-12-18 21:32:32

文章标签 java性别单选框如何获取选择内容 html 源文件 javascript 文章分类 Java 后端开发

1.1 HTML基础

HTML：超文本标记语言(HyperText Markup Language)

示例1-1：第一个HTML文件

源文件：HelloWorld.htm

<html>
	<head>
		<title>First HTML Doc</title>
	</head>
	<body>
		Hello World
	</body>
</html>

1.2 <HEAD>中常用的标记

1.3 <BODY>中常用的标记

1.3.1 <BODY>标记

bgcolor：背景色

background：背景图片

text：文字颜色

示例1-2：在<BODY>标记中设置文字颜色和背景色

源文件：body.htm

<html>
	<head>
		<title>Second HTML Doc</title>
	</head>
	<body bgcolor="red" background="bg.gif" text="#00ff00">
		<h1>body中的文字，</h1>将会显示成绿色
	</body>
</html>

1.3.2 <FONT>标记

1.3.3 标题字体

1.3.4 <IMG>标记

1.3.5 <A>标记

1.3.6 列表标记

1.3.7 表格定义标记

示例1-3：使用表格

源文件：table.htm

<html>
	<body>
		<table width="300" border="1" bgcolor="#A1A1A1">
			<tr>
				<th>姓名</th><th>年龄</th><th>性别</th>
			</tr>
			<tr>
				<td>张三</td><td>23</td><td>男</td>
			</tr>
			<tr>
				<td>玛丽</td><td>20</td><td>女</td>
			</tr>
		</table>
	</body>
</html>

示例1-4：不规则的表格

源文件：table1.htm

<html>
	<body>
		<table width="300" border="1">
			<tr>
				<td colspan="3" align="center">学生登记表</td>
			</tr>
			<tr>
				<th>姓名</th><th>年龄</th><th>性别</th>
			</tr>
			<tr>
				<td>张三</td><td>23</td><td>男</td>
			</tr>
			<tr>
				<td>玛丽</td><td>20</td><td>女</td>
			</tr>
		</table>
	</body>
</html>

1.3.8 表单定义

1.3.9 文本组件

示例1-5：文本组件

源文件：textele.htm

<html>
	<body>
		<form action="/reg/register.jsp" method="post" name="userinfo">
			<input type="text" name="UserName" size="15" maxlength="30" value="默认值"/><br />
			<input type="password" name="UserPwd" size="15" maxlength="30"/><br />
			<textarea name="DES" rows="5" cols="20">默认的值放在这里</textarea>
		</form>
	</body>
</html>

1.3.10 下拉列表

示例1-6：单选列表和多选列表

源文件：textele.htm

<html>
	<body>
		<form action="" method="post" name="fn">
			<select name="Favorite" size="4" multiple>
				<option value="Basketball">篮球</option>
				<option value="Volleyball">排球</option>
				<option value="TableTennis">乒乓球</option>
				<option value="Tennis">网球</option>
			</select>
			<br /><br />
			<select name="Gender">
				<option value="Man" selected>男</option>
				<option value="Woman">女</option>
			</select>
		</form>
	</body>
</html>

1.3.11 单选框

1.3.12 多选框

示例1-7：单选框和多选框

源文件：check.htm

<html>
	<body>
		<form name="fn" action="">
			选择性别：
			<input type="radio" name="性别" value="男" />男
			<input type="radio" name="性别" value="女" checked />女
			<br /><br />
			<input type="checkbox" name="兴趣" value="上网" checked />上网
			<input type="checkbox" name="兴趣" value="踢球" />踢球
			<input type="checkbox" name="兴趣" value="篮球" />篮球
			<input type="checkbox" name="兴趣" value="健身" />健身
		</form>
	</body>
</html>

1.3.13 按钮

1.3.14 隐藏域

1.3.15 文件上载组件

需要将form的enctype属性设置为"multipart/form-data"，并将method的属性设置为post。

1.4 JavaScript编程入门

1.4.1 JavaScript基础知识

示例1-8：第一个JavaScript程序

源文件： FirstJS.htm

<html>
	<head>
		<title>第一个JavaScript</title>
	</head>

	<body>
		第一个JavaScript演示
		<br />
		<script language="javascript">
			document.write("这行文字是JavaScript执行后打印出来的！");
		</script>
	</body>
</html>

1.4.2 JavaScript常用内置对象

示例1-9：用window.open()新打开一个窗口

源文件： WindowOpen.htm

<html>
	<head>
		<title>父窗口</title>
	</head>

	<body>
		<script language="javascript">
			window.open("FirstJS.htm","","width=390,height=5,toolbar=no,resizable=no,top=200,left=200");
		</script>
	</body>
</html>

1.4.3 JavaScript中的方法

示例1-10：警告框

源文件： Alert.htm

<html>
	<head>
		<title>警告框例子</title>
		<script language="javascript">
			alert("此处信息会在警告框上出现！");
		</script>
	</head>

	<body>
		<br />
		警告框打开的时候，无法对浏览器进行操作。
	</body>
</html>

示例1-11：确定对话框

源文件： Confirm.htm

<html>
	<head>
		<title>确认框例子</title>
		<script language="javascript">
			if(confirm("你确认删除词条信息么？"))
			{
				document.write("删除了信息！");
			}
			else
			{
				document.write("没有删除信息！");
			}
		</script>
	</head>

	<body>
	</body>
</html>

示例1-12： prompt对话框

源文件： Prompt.htm

<html>
	<head>
		<title>询问框例子</title>
		<script language="javascript">
			var user = prompt("输入你的姓名：","");
			document.write("你好，" + user);
		</script>
	</head>

	<body>
	</body>
</html>

1. 4.4 JavaScript中的事件处理

示例1-13： onload事件处理

源文件： Load&Unload.htm

<html>
	<head>
		<title>load/unload</title>
		<script language="javascript">
			function mytest()
			{
				alert("即将退出文档！");
			}
		</script>
	</head>

	<body οnlοad="javascript: alert('即将装载文档。');" οnunlοad="javascript: mytest();">
	</body>
</html>

示例1-14：聚焦事件处理

源文件： Focus.htm

<html>
	<head>
		<title>focus</title>
		<script language="javascript">
			function focusHandle()
			{
				alert("光标聚焦到文本框！");
			}
		</script>
	</head>

	<body>
		<form name="test">
			<input type="text" name="UserName" οnfοcus="javascript: focusHandle();" />
		</form>
	</body>
</html>

示例1-15：失去焦点事件处理

源文件： Blur.htm

<html>
	<head>
		<title>blur</title>
		<script language="javascript">
			function blurHandle()
			{
				alert(document.test.UserName.value);
			}
		</script>
	</head>

	<body>
		<form name="test">
			<input type="text" name="UserName" οnblur="javascript: blurHandle();" />
		</form>
	</body>
</html>

示例1-16：点击事件处理

源文件： Click.htm

<html>
	<head>
		<title>click</title>
		<script language="javascript">
			function validateForm()
			{
				if(confirm("你确认提交这个表单么？"))
				{
					document.test.submit();
				}
			}
		</script>
	</head>

	<body>
		<form name="test">
			<input type="text" name="UserName" />
			<br />
			<input type="button" name="sub" value="提交" οnclick="javascript: validateForm();" />
		</form>
	</body>
</html>

示例1-17：内容改变处理

源文件： Change.htm

<html>
	<head>
		<title>change</title>
	</head>

	<body>
		<form name="test">
			<input type="text" name="UserName" οnchange="javascript: alert('文本框内容已经改变！');" />
			<br />
			<select name="year" οnchange="javascript: alert(this[this.selectedIndex].value);">
				<option value="1999">1999</option>
				<option value="2000">2000</option>
				<option value="2001">2001</option>
				<option value="2002">2002</option>
				<option value="2003">2003</option>
				<option value="2004">2004</option>
				<option value="2005">2005</option>
			</select>
		</form>
	</body>
</html>

示例1-18：选择事件处理

源文件：Select.htm

<html>
	<head>
		<title>select</title>
	</head>

	<body>
		<form name="test">
			<input type="text" name="UserName" value="JS编程基础" οnselect="javascript: alert(this.value);" />
			<br />
		</form>
	</body>
</html>

示例1-19：提交事件处理

源文件： Submit.htm

<html>
	<head>
		<title>submit</title>
		<script language="javascript">
			function checkForm()
			{
				return (confirm("你确认提交表单吗？"));
			}
		</script>
	</head>

	<body>
		<form name="test" οnsubmit="javascript: return checkForm();">
			<input type="text" name="UserName" value="" />
			<br />
			<input type="submit" name="sub" value="提交表单" />
		</form>
	</body>
</html>

1.4.5 使用JavaScript进行表单验证

示例1-20：验证表单

源文件： CheckForm.htm

<html>
	<head>
		<title>CheckForm</title>
		<script language="javascript">
			function checkForm()
			{
				var theForm = document.test;
				if(theForm.UserName.value == "")
				{
					alert("请输入用户名！");
					theForm.UserName.focus();
				}
				else if(theForm.pwd.value == "")
				{
					alert("请输入密码！");
					theForm.pwd.focus();
				}
				else
				{
					theForm.submit();
				}
			}
		</script>
	</head>

	<body>
		<form name="test" method="post" action="Login.jsp">
			用户名：<input type="text" name="UserName" />
			<br />
			密码：<input type="password" name="pwd" />
			<br />
			<input type="button" value="提交" οnclick="javascript: checkForm();" />
		</form>
	</body>
</html>

1.5 配置JSP/Servlet开发环境

1.5.1 Tomcat的安装和使用

1.5.2 建立应用目录

要想让JSP程序正常运行，需要简历自己的应用目录，具体步骤如下：

a.在Tomcat下的webapps目录下创建自己的程序目录，例如first；

b.在first下创建目录WEB-INF，注意大小写；

c.在WEB-INF下创建目录classes和文件web.xml。classes用于存放Servlet类文件、JavaBean类文件以及其他的相关类文件等。

示例1-21：配置web.xml

源代码： web.xml

<web-app>
	<welcome-file-list>
		<welcom-file>index.html</welcom-file>
	</welcome-file-list>
</web-app>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：vscode正在激活python扩展 vscode一直正在生成

下一篇：应用架构评审规范应用架构治理原则

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

java性别单选框如何获取选择内容 javaweb性别选项设置

java性别单选框如何获取选择内容 javaweb性别选项设置

51CTO博客