html表单验证

最新推荐文章于 2024-03-01 20:16:14 发布

xiaozhang___

最新推荐文章于 2024-03-01 20:16:14 发布

阅读量701

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html

本文链接：https://blog.youkuaiyun.com/xiaozhang___/article/details/80374763

html 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了HTML表单中的各种元素及其用法，包括文本输入框、密码框、文本域、单选框、复选框、下拉框、文件上传等，并提供了实际应用示例。

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

表单

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>

<form action="表单验证.html"method="post"enctype="multipart/form-data">
<fieldset>
<legend>form表单</legend>
<!--在可以输入的地方加上输入提示语-->
<p>
<span>姓名：</span>
<!-- readonly只读-->
<input type="text"name="userName" placeholder="请输入你的姓名"value="张三"readonly/>
</p>
<p>
<span>密码：</span>
<input type="password"name="pwd" placeholder="请输入你的密码"/>
</p>

<p>
<!-- 文本域（多行文本）-->
<textarea name="texArea" id="" cols="30" rows="10"placeholder="请输入自我介绍最少50个字"></textarea>
</p>
<p>
<!-- 单选框-->
<input type="radio" name="gender"checked value="man"/>男
<input type="radio"name="gender" value="woman"/>女
<input type="radio"name="gender" value="unknow"/>不详
</p>
<!-- 多选-->
<!-- 要加上name-->
<p>
<input type="checkbox"name="hobby"value="eat"checked/>吃
<input type="checkbox"name="hobby"value="drink"/>喝
<input type="checkbox"name="hobby"value="play"/>玩
<input type="checkbox"name="hobby"value="happy"/>乐
</p>

<!--下拉框select-->
<p>
<select name="sel" >
<!-- 和option联合使用-->
<option value="chengdu">成都</option>
<option value="shanghai"selected>上海</option>
<option value="beijing">北京</option>
<option value="zhejiang">浙江</option>
<option value="hubei">湖北</option>
<option value="hunan">湖南</option>
</select>
</p>
<p>
<!-- 如果有上传文件的操作，必须将form-method该为post，并修改提交数据的格式，在form中enctype-->
<input type="file"name="file"/>
</p>

<p>
<input type="submit"value="登陆"/>
<input type="reset"value="取消"/>
<!-- 如果让某些空间不能使用则可以使用disabled-->
<input type="button"name="login"value="确定"disabled/>
</p>




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