JaveScript_字符串拼接实例

最新推荐文章于 2024-04-28 00:00:00 发布

YaJeanZhang_

最新推荐文章于 2024-04-28 00:00:00 发布

阅读量641

点赞数

分类专栏： JavaScript 文章标签： JavaScript 字符串拼接网页信息表单元素

本文链接：https://blog.csdn.net/weixin_43718414/article/details/84899321

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

题目：
制作一个网页，包含让用户输入姓名，籍贯（省，市信息），联系电话的表单元素，当用户点击提交信息按钮之后，将用户输入的信息显示在下方textarea 中，页面显示效果如下图：
在这里插入图片描述
代码分析1：
1.span标签被用来组合文档中的行内元素（文本）,任何浏览器均可兼容；
2.input标签中的type="text"为接收输入的文本;
3.select标签用于制作下拉表单；select 标签下的 option 为具体select下拉表单的值；
4.textarea标签为文本域，接收用户输入的信息显示在此处。
5.单击button按钮，即触发onclick事件通过show()调用方法获取信息;

<!DOCTYPE html>
<html>
<head>
	<title>StringStrcat</title>
	<meta charset="utf-8">
	<script type="text/javascript">
		function show()
		{
			var oname = document.getElementById("name").value;
			var oprovice = document.getElementById("provice").value;
			var ocity = document.getElementById("city").value;
			var onum = document.getElementById("num").value;
			document.getElementById("message").value = oname + "\n" + oprovice + ocity + "\n" + onum;
		}
	</script>
</head>
<body>
	<form id="myform" method="post">
		<span>姓名：</span>
		<input type="text" name="name" id="name"><br>
		<span>籍贯：</span>
		<select id="provice">
			<option value="陕西">
				陕西
			</option>
			<option value="青海">
				青海
			</option>
		</select>
		<span>省</span>
		<select id="city">
			<option value="汉中">
				汉中
			</option>
			<option id="格尔木">
				格尔木
			</option>
		</select>
		<span>市</span><br>
		<span>联系电话：</span>
		<input type="text" name="num" id="num">
		<input type="button" name="submit" value="提交信息" id="submit" onclick="show()"><br>
		<textarea id="message" cols="40" rows="10">	   //文本显示区域
		</textarea>
	</form>
</body>
</html>

代码分析2：
document.getElementById(“id”).value
通过获取表单元素中id号获取值，id号唯一，故不必担心重复；
textarea: cols=“40” rows=“10”
设置了文本域的大小10行40列，若不规定大小即浏览器会给定一个自定义大小，为了方便美观，可定一个规定大小的文本域。

欢迎提出您宝贵的意见！