HTML(之表单的)案例

本文介绍了HTML表单的基础用法和特殊元素的应用,通过代码案例展示了如何创建和使用表单,帮助读者掌握网页交互设计。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、表单的基本用法:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h2>用户注册</h2>
	<form action="" method="get" enctype="multipart/form-data">
		用户名:<input type="text" name="usrname" value="张杰">
		<br>
		密  码:<input type="password" name="pwd">
		<br>
		年  龄:<input type="text" name="age" value="18" enabled>
		<br>
		性  别:<input type="radio" name="sex" value="male" checked>
				<img src="../../img/male.gif" alt="">
			    <input type="radio" name="sex" value="female">
			    <img src="../../img/female.gif" alt="">
		<br>
		爱  好:
			    <input type="checkbox" name="hobby" value="eat">吃饭
			    <input type="checkbox" name="hobby" value="sleep">睡觉
			    <input type="checkbox" name="hobby" value="doudou">打豆豆
		<br>
		头  像:
				<input type="file" name="head" accept="image/jpeg">
				<input type="hidden" name="usr_id" value="9528">
		<hr>
		<input type="submit">
		<input type="reset">
		<hr>
		<input type="image" src="../../img/submit.gif">
		<input type="image" src="../../img/reset.gif">
		<hr>
		<input type="button" value="普通按钮">
	</form>
</body>
</html>

案例:在这里插入图片描述

2、特殊表单元素:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form action="">
		学历
		<select name="degree">
			<option value="0">--请选择学历--</option>
			<option value="dazhuan">大专</option>
			<option value="benke" selected>本科</option>
			<option value="yanjiusheng">研究生</option>
			<option value="shuoshi">硕士</option>
		</select>
		<br>

		城市:
		<select name="">
			<optgroup label="山西省"> 
				<option value="taiyuan">太原</option>
				<option value="datong">大同</option>
				<option value="changzhi">长治</option>
			</optgroup>
			<optgroup label="山东省">
				<option value="jinan">济南</option>
				<option value="qingdao">青岛</option>
				<option value="nanjing">南京</option>
			</optgroup>
			<optgroup label="江苏省">
				<option value="rizhao">日照</option>
				<option value="yangzhou">杨洲</option>
				<option value="xuzhou">徐州</option>
			</optgroup>

		</select>
		<br>
		个人简介:
		<textarea name="intrduce" ></textarea>
		<br>
		服务协议:
		<textarea name="intrduce" rows="10" cols="20" eadonly>
			请遵守本网站的相关协议和国家的法律规定
			请遵守本网站的相关协议和国家的法律规定
			请遵守本网站的相关协议和国家的法律规定
			请遵守本网站的相关协议和国家的法律规定
		</textarea>

		<hr>
		<input type="submit">

	</form>
</body>
</html>

案例:在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值