HTML中的滚动效果和text输入文字点击消失效果

HTML中的滚动效果和text输入文字点击消失效果

1.制作滚动效果

<marquee></marquee>双标签可以使包括在标签内的内容滚动。内容可以是文字、图片、表格、多媒体等所有内容,编码格式如下:
<marquee direction="方向(right,left,up,down)" behavior="Scroll循环滚动;Alternate来回滚动;Slide滚动一次停止" scrollamount="速度,值越大越快"></marquee>

2.点击text输入框,里面初始值消失

解决这个问题,有两种方法:

(1)使用onfocus事件检查当前值

如果是默认值就将value属性置空<input type="text" value="请输入内容" onfocus="javascript:if(this.value=='请输入内容')this.value='';">,这 是JS解决
方法。但此方法的弊端,不适用于<input>的password的类型。

(2)HTML5的placeholder属性

placeholder属性提供可描述输入字段预期值的提示信息,该提示会在输入字段为空时显示,并会在字段获得焦点时消失。除此之外,placeholder属性适用于以下的<input>类型:text,search,url,telephone,email,以及password。

例子代码如下:
<html>
	<head>
		<title>个人会员注册页面</title>
	</head>
	<body align="center">
		<form name="from1" action="" method="post">
		<table border="1">
			<tr><td colspan="2" align="center">个人会员注册</td></tr>
			<tr>
				<td>姓名:</td><td><input type="text" align="center" name="txt_name" value="请输入您的姓名" onfocus="javascript:if(this.value=='请输入您的姓名')this.value='';"/></td>			
			</tr>
			<tr>
				<td>密码:</td><td><input type="password" name="txt_pwd1" placeholder="请输入您的密码"/></td>
			</tr>
			<tr>
				<td>确认密码:</td><td><input type="password" name="txt_pwd2" placeholder="请确认您的密码"/></td>
			</tr>
			<tr>
				<td>性别:</td>
				<td>
					<input type="radio" name="sex" value="man" checked="checked"/>男
					<input type="radio" name="sex" value="woman"/>女
					<input type="radio" name="sex" value="scurity"/>保密 	
				</td>
			</tr>
			<tr>
				<td>名族:</td>
				<td>
					<select name="nation">
						<option value="han">汉族</option>
						<option value="man">满族</option>
						<option value="hui">回族</option>
					</select>
				</td>
			</tr>
			<tr>	
				<td>兴趣:</td>
				<td>
				<marquee direction="left" behavior="Scroll" scrollamount="5">
					<input type="checkbox" name="favorites" value="read"/>阅读
					<input type="checkbox" name="favorites" value="swim"/>游泳
					<input type="checkbox" name="favorites" value="music"/>音乐
					<input type="checkbox" name="favorites" value="computer"/>计算机
					<input type="checkbox" name="favorites" value="stamp"/>集邮
				</marquee>
				</td>
			</tr>
			<tr>
				<td>相片:</td>
				<td>
					<input type="file" name="file_image"/>
					<input type="submit" name="btn_image" value="上传"/>
				</td>
			</tr>
			<tr>
				<td>简介:</td>
				<td>
					<textarea cols="40" rows="8" name="txt_intro">
						请输入您的个人简介,让朋友们更了解你!	
						请输入您的个人简介,让朋友们更了解你!
						请输入您的个人简介,让朋友们更了解你!
						请输入您的个人简介,让朋友们更了解你!
						请输入您的个人简介,让朋友们更了解你!
						请输入您的个人简介,让朋友们更了解你!
						请输入您的个人简介,让朋友们更了解你!
					</textarea>
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<input type="submit" name="btn_submit" value="注册"/>
					<input type="reset" name="btn_reset" value="重填"/>
				</td>
			</tr>
		</table>
		</form>
	</body>
</html>


你可能感兴趣的:(HTML中的滚动效果和text输入文字点击消失效果)