HTML的表单元素

最新推荐文章于 2024-05-23 20:09:14 发布

abandon_i

最新推荐文章于 2024-05-23 20:09:14 发布

阅读量208

点赞数 2

分类专栏： web前端文章标签： html linq javascript

本文链接：https://blog.csdn.net/abandon_i/article/details/122458022

版权

web前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

1、<from></from>

action属性：定义表单提交的地址，通常为URL地址

method属性：定义表单提交方式，post或get

2、<imput />

type属性	类型
<input type="text">	单行文本框
<input type="password">	密码输入框
<input type="radio">	单选按钮
<input type="check">	多选按钮
<input type="submit">	提交按钮
<input type="reset">	重置按钮
<input type="button">	按钮
<input type="image">	图片形式提交按钮
<input type="file">	选择文件控件
<input type="hiden">	隐藏的输入区域

name,value属性，这两个属性决定表单提交时，对应参数分别从这两个属性获取，形式name=value

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单</title>
	</head>
	<body>
		<h2>注册账号</h2>
		<form action="regist" method="post">
			用户名：<input type="text" name="username" id="username" value="" />
			<input type="button"  name="checkusername" id="checkusername" value="检查用户名是否被注册" /><br />
			密码：<input type="password" name="password" id="password" value="" />
			确认密码：<input type="password" name="" id="re_password" value="" />
			性别：<input type="radio" name="sex" id="sex_man" value="man" checked="checked"/>男<input type="radio" name="sex" id="sex_woman" value="woman" />女<br />
			兴趣爱好：<input type="checkbox" name="interest" id="ins_football" value="football" />足球
					<input type="checkbox" name="interest" id="ins_volleyball" value="volleyball" />排球
					<input type="checkbox" name="interest" id="ins_ping-pang" value="ping-pang" />乒乓球
			选择头像：<input type="file" name="file" id="file" value="" /><br />
			<input type="image" width="80" height="80" src="图片路径"/><br />
			<input type="reset" value="重置信息" /><input type="reset" value="注册账号" />
			<input type="hidden" name="regist" id="" value="default" />
		</form>
	</body>
</html>

运行：

下拉列表，滚动列表：

<select>定义列表<option>定义列表项

<select>的name属性，<option>的value属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单</title>
	</head>
	<body>
		<h2>表单</h2>
		<form action="homeplace" method="post">
			您的家乡：<select name="homeplace">
				<option value="Beijing">北京</option>
				<option value="Tianjing">天津</option>
				<option value="Shanghai">上海</option>
				<option value="Chongqing">重庆</option>
				<option value="Hebei">河北</option>
				<option value="Henan">河南</option>
				<option value="Shanxi">山西</option>
				<option value="Shandong">山东</option>
				<option value="Liaoning">辽宁</option>
				<option value="Jilin">吉林</option>
				<option value="Heilongjiang">黑龙江</option>
				<option value="Jiangsu">江苏</option>
			</select>
			<input type="submit" id="" name="" />
		</form>
	</body>
</html>

运行：

<select>的size和multiple属性决定下拉列表或滚动列表，size设置选择栏高度，multiple决定单选列表或多选列表

（若size数值大，就不用滚动/多选了，选项全部显示出来）

<select name="xxx" multiple="multiple"></select>
<select name="xxx" size="3"></select>

多行文本域：

name用于提交的参数，value源自输入的文本内容，clos定义列数rows定义行数，即宽高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单</title>
	</head>
	<body>
		<h2>调查</h2>
		<form action="inquire" method="post">
			自我评价：<br />
			<textarea rows="10" cols="50" name="introduce">
			</textarea><br />
			<input type="submit" id="" name="" />
		</form>
	</body>
</html>

运行：

abandon_i

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML的表单元素

1、<from></from>action属性：定义表单提交的地址，通常为URL地址method属性：定义表单提交方式，post或get2、<imput />type属性类型 <input type="text"> 单行文本框 <input type="password"> 密码输入框 <input type="radio"> 单选按钮 <input type="check
复制链接

扫一扫