Html表单

最新推荐文章于 2024-09-27 11:01:06 发布

聪聪的学习笔记

最新推荐文章于 2024-09-27 11:01:06 发布

阅读量52

点赞数

分类专栏： HTML 文章标签： html javascript html5

本文链接：https://blog.csdn.net/weixin_42773097/article/details/120016736

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

表单的常用属性

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
	</head>
	<body>
		<!-- 表单标签form -->
		<form action="" method="">
			名字：<input type="text" size="12"/><br/>
			姓氏：<input type="text" size="12"/><br/>
			登录名：<input type="text" size="12"/>(可包含0-9和下划线)<br/>
			密码：<input type="password" size="12" /><br>
			再次输入密码：<input type="text" size="12"/><br>
			电子邮箱：<input type="text" size="12"/><br>
			性别：<input type="radio" name="sex" />男
				 <input type="radio" name="sex" />女<br>
			爱好：<input type="checkbox" name="hobby" />运动
				 <input type="checkbox" name="hobby" />聊天
				 <input type="checkbox" name="hobby" />打游戏
				 <input type="checkbox" name="hobby" />吃<br>
			户籍地：<select>
						<option >吉林省</option>
						<option >辽宁省</option>
						<option >湖北省</option>
				   </select><br>
			自我介绍：<textarea rows="5" cols="4">
					 </textarea><br>
			选择文件：<input type="file"/><br>
			<input type="submit" value="提交"/>
			<input type="reset" value="重置" />
		</form>
	</body>
</html>

在这里插入图片描述

表单的高级用法

在这里插入图片描述

表单的练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
	</head>
	<body>
		<h2>申请表</h2>
		<form action="" method="">
			姓名：<input type="text" size="12"/><br>
			密码：<input type="password" size="12" /><br>
			照片：<input type="file" size="12"/><br>
			感兴趣的职位：
				<input type="radio" name="ha" />Web设计
				<input type="radio" name="ha" />Web开发<br>
			向往的城市：
				<select>
					<option>北京</option>
					<option>上海</option>
				</select><br>
			协议：<br><textarea readonly="readonly" rows="5" cols="10">求职信息必须真实准确</textarea><br>
			<input type="checkbox" />我认真阅读并接受以上协议。
			经验：
				<select>
					<option>1</option>
					<option>2</option>
				</select><br>
			<input type="submit" disabled="disabled" value="提交"/>
			<input type="reset"  value="重置" />
		</form>
	</body>
</html>