表单的补充——表单域

最新推荐文章于 2022-07-25 14:43:11 发布

huijie_0716

最新推荐文章于 2022-07-25 14:43:11 发布

阅读量1.9k

点赞数 6

分类专栏： HTML5 文章标签： javascript 前端

本文链接：https://blog.csdn.net/huijie_0716/article/details/123185379

版权

HTML5 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

表单域对象

表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等，用于采集用户的输入或选择的数据

文本框

文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等

代码格式：＜input type="text" name="..." size="..." maxlength="..." value="..."＞

密码框

是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。

代码格式：＜input type="password" name="..." size="..." maxlength="...“/＞

隐藏域

隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

代码格式：＜input type="hidden" name="..." value="..."＞

复选框

复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。

代码格式：＜input type="checkbox" name="..." value="..."＞

单选框

当需要访问者在待选项中选择唯一的答案时，就需要用到单选框了。

代码格式：＜input type="radio" name="..." value="..."＞

必须写上相同的name值才能每次选中一个

文件上传框

有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件

代码格式：＜input type="file" name="..." size="15" maxlength="100"＞

多行文本框

也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。

代码格式：＜textarea name="..." cols="..." rows="..." ＞＜/textarea＞

下拉选择框

下拉选择框允许你在一个有限的空间设置多种选项。

＜select name="..." size="..." multiple＞

                ＜option value="..." selected＞...＜/option＞

                 ...

＜/select＞

表单练习

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<h1>小明的报名表</h1>
				<form>
					<p>
						用户名:<br>
						<input type="text" name="usename" placeholder="手机/邮箱/用户名" style="width: 245px;"/>
					</p>
					<p>
						密码:<br>
						<input type="password" name="pwd" placeholder="密码" style="width: 245px;"/>
					</p>
					<p>
						确认密码:<br>
						<input type="password" name="pwd" placeholder="密码" style="width: 245px;"/>
					</p>
					<p>
						爱好:<br>
						<input type="checkbox" name="like" id="like1" value="唱歌" /><label for="like1">唱歌</label>
						<input type="checkbox" name="like" id="like2" value="跳舞" /><label for="like2">跳舞</label>
						<input type="checkbox" name="like" id="like3" value="游泳" /><label for="like3">游泳</label>
						<input type="checkbox" name="like" id="like4" value="看书" /><label for="like4">看书</label>
						<input type="checkbox" name="like" id="like5" value="玩手机" /><label for="like5">玩手机</label>
					</p>
					<p>
					性别:<br>
					<input type="radio" name="sex" id="sex1" value="男" /><label for="sex1">男</label>
					<input type="radio" name="sex" id="sex2" value="女" /><label for="sex2">女</label>
					<input type="radio" name="sex" id="sex3" value="保密" /><label for="sex3">保密</label>
					</p>
					<p>
						上传照片<br>
						<input type="file">
					</p>
					学历<br>
					<select>
						<option value ="博士">博士</option>
						<option value ="本科">本科</option>
						<option value ="专科">专科</option>
						<option value ="研究生">研究生</option>
					</select>
					<p>
						个人签名<br>
						<textarea rows="10" cols="40"></textarea>
					</p>
					<input type="submit" value="马上报名" style="width: 200px;height: 40px;"/>
					<input type="reset" value="重置">
					<input type="button" value="同意">
				</form>
		</div>
	</body>
</html>

huijie_0716

关注

6
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
表单的补充——表单域

表单域对象表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等，用于采集用户的输入或选择的数据文本框文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等代码格式：＜input type="text" name="..." size="..." maxlength="..." value="..."＞密码框是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。
复制链接

扫一扫