HTML-form表单示例

最新推荐文章于 2024-07-19 21:11:59 发布
最新推荐文章于 2024-07-19 21:11:59 发布
阅读量461 收藏
点赞数
分类专栏： HTML 文章标签： html css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32456663/article/details/106852258
版权 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>form-128</title>
</head>
<body>
	<!-- <form action="#" method="post"> -->
	<form action="03-new.html" method="post">
		<div>
			<lable>username</lable>
			<div>
				<!--  tidy风格 一对一对的写成格式
					placeholder：在没有value值提示的时候，默认在文本框中输入提示的内容
					required: 必须满足规则
					checked:单选/复选框 默认勾选某项
					checkbox:多选 name='read',value=yes
				 -->
			<input type="text" name="username" minlength="1" maxlength="16" placeholder="用户名" required="">
			</div>
			<lable>password</lable>
			<div>
			<input type="password" name="password" minlength="1" maxlength="16" placeholder="密码" required="">
			</div>
            <div>
            	<lab>email</lab>
            	<div>
            		<input type="email" name="email" placeholder="可选">
            		
            	</div>
            </div>
              <div>
              	<label>ganeder</label>
                <div>
                	<input type="radio" name="ganeder" value="femal">女士
                	<input type="radio" name="ganeder" value="male">男士
                	<input type="radio" name="ganeder" value="secury" checked="">保密
                </div>
                <div>
              <lab>hobby</lab>
              <div>
              	<input type="checkbox" name='read' value=yes checked>读书
              	<input type="checkbox" name='play' value=yes>运动
              	<input type="checkbox" name='movie' value=yes>影视
              	<input type="checkbox" name='movie' value=yes checked>其他
              </div>
                </div>
                <div>
                	<label>age:</label>
                	<!-- type:为number,数字会出现上下拉，添加减少数字。 可以设置最大值，最小值 -->
                     <input type="number" name="age" value="18" min="1" max="130">
                </div>
                
                <div>
                	<label>salary</label>
                	<div>
                		<!-- range：必须配合样式表，才是最有用的 -->
                	<input type="range" name="coin" value="" min="1" max="100" step=10>
                    </div>
                </div>
                 
                 <div>
                 	<label>date</label>
                 	<!-- date: 下拉选择的话，对于2月份会选择29天，不对自动判断闰年，月份的天数 -->
                 	<div>
                 	<input type="date" name="date">
                 	<input type="month" name="month">
                 	<input type="datetime-local" name="datetime">
                    </div>
                 </div>

              <div>
			<lable>submit</lable>
			<div>
	<!-- submit没有value值得时候，
	 h3,h4之前用的标签  submit浏览器中默认会设置为提交显示 各个浏览器的默认提示不同，http浏览器需要输入http或者https
	-->
			<input type="submit" name="submit" value="submit-login">
			<input type="reset" name="reset" value="reset">
			</div>
			<p>
			<!-- <input type="button" name="button" οnclick="login()" value="button-sign in"> -->
			</p>
		<div>
			<!-- button本身默认功能就是发送 h5新的常用的标签 -->
			<button>button-sign </button>
		</div>
		</div>
		<h3>表单验证</h3>
	</form> 
</body>
</html>
爱在浪漫中舞蹈
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html的form表单实例介绍
12-23
html的form表单中button等实例介绍
Django之强大的Form功能
weixin_30781775的博客
08-25 127
Form Form的验证思路 前端：form表单 后台：创建form类，当请求到来时，先匹配，匹配出正确和错误信息。 Django的Form验证实例： 创建project，进行基础配置文件配置 STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR,"static"), ) s...
vxe-table——实现table 动态显示 +冻结列等功能——技能提升
最新发布
yehaocheng520的博客
07-19 1624
vex-table——实现table 动态显示+冻结 列等功能——技能提升
HTML表单示例
Useless_csdn的博客
01-11 3117
表单是HTML页面中负责数据采集功能的部件。它往往由三部分组成，即表单标签、表单域、表单按钮。 表单标签：用于表面表单的范围，位于表单标签中的元素将被提交 语法：&lt;form&gt;&lt;form&gt; 属性：Method,Enctype,action 表单域：包括文本框，密码框等多种类型 语法：&lt;input……/&gt; 属性：type,name,value 种类：文...
html中form表单的使用实例
give me five
09-07 1164
信息发送    终端绑定：     SIM卡号:    一键导航(3)       IMEI:
Html中Form表单案例综合分析
qq_41886231的博客
03-08 1403
Form表单的应用开发，结合HTM+CSS+javascript的综合应用，都是比较基础的知识点。之后有时间可能会用React重新写一次。
el-form 多层级表单的实现示例
10-14
结合上述内容，多层级表单的实现示例说明了如何利用Element UI中的el-form组件，结合Vue的数据绑定和组件复用特性，构建复杂的表单结构。在实际开发中，开发者可以根据需求灵活运用这些组件和属性，创建出具有层级...
react-form:示例表单按钮React组件
07-01
"react-form: 示例表单按钮React组件"这个项目就是针对这一需求的一个实例。它展示了一个使用React来创建表单按钮的详细过程，帮助开发者了解如何在实际应用中处理表单数据和事件。 React.js是Facebook开发的一个...
jQuery EasyUI API 中文文档 - Form表单
10-28
在这个框架中，Form表单组件是一个非常重要的部分，它可以帮助开发者创建出各种复杂度的表单，并且提供了方便的数据操作接口。下面，我们将详细解读jQuery EasyUI API中文文档中关于Form表单的知识点。 首先，了解...
源码解析之rc-field-form解读与实现
09-04
压缩包中的`diy-form`可能是示例代码，它展示了如何根据需求自定义表单。你可以参考这个例子来学习如何结合`rc-field-form`创建符合业务需求的复杂表单。 总结来说，`rc-field-form`为React应用提供了强大的表单...
【Html】Html中的Form表单的基础示例
【敦厚的曹操】的专栏
01-09 405
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt...
HTML-06-form表单介绍及相应案例
LYM0411的博客
04-22 1324
form表单
HTML表单实例
weixin_30872789的博客
12-17 201
1 HTML表单 2 3 表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，实现一个特定功能的表单区域（比如：注册）， 4 5 首先应该用<form>标签来定义表单区域整体，在此标签中再使用不同的表单控件来实现不同类型的信息输入， 6 7 具体实现及注释可参照以下伪代码： 8 9 <!-- form...
HTML（之表单的）案例
ChengMeng11的博客
03-14 1131
1、表单的基本用法： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h2>用户注册</h2> <f...
HTML---表单案例
sumuqi的博客
03-14 404
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h2>用户注册</h2> <form action="" m...
HTML实例之表单
qq_43131852的博客
09-25 317
参考https://www.w3school.com.cn/html/index.asp 文本域(Text fields) <html> <body> <form> 名： <input type="text" name="firstname"> <br /> 姓： <input type="text" name="lastnam...
form表单案例
xiangwangdeshenghuo的博客
03-27 1274
做了一个表单，是在VSCode里写的 应用的表单元素 单行输入框—input 单选按钮------radio 下拉框---------select 多选按钮------checkbox 文本域---------textarea 上传文件------input type=“file” 元素说明 div是块级元素，自动换行 span标签被用来组合文档中的行内元素，通过样式来格式化它们。 opti...
html表单应用的简单例子
米小豆的博客
06-10 750
比较简单，直接上 代码 昵称 密码 确认密码 男 第二种 <input name="sextype" type="radio">女 --> 性别男 <input name="sextype"
HTML表单
qq_38855717的博客
08-02 1213
示例如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;表单&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &
el-form表单嵌套el-form
09-08
可以使用`el-form`表单组件嵌套另一个`el-form`表单组件。这种嵌套可以用于更复杂的表单布局和组织。 以下是一个示例代码，演示了如何嵌套`el-form`表单： ```vue <template> <el-form ref="outerForm" :model="outerForm" label-width="100px"> <el-form-item label="外层表单项"> <el-input v-model="outerForm.field1"></el-input> </el-form-item> <el-form ref="innerForm" :model="innerForm" label-width="100px"> <el-form-item label="内层表单项"> <el-input v-model="innerForm.field2"></el-input> </el-form-item> </el-form> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { outerForm: { field1: '' }, innerForm: { field2: '' } }; }, methods: { submitForm() { this.$refs.outerForm.validate((validOuterForm) => { if (validOuterForm) { // 外层表单校验通过 this.$refs.innerForm.validate((validInnerForm) => { if (validInnerForm) { // 内层表单校验通过，提交数据 console.log(this.outerForm); console.log(this.innerForm); } else { // 内层表单校验不通过 return false; } }); } else { // 外层表单校验不通过 return false; } }); } } }; </script> ``` 在上面的示例中，外层表单和内层表单都使用了`el-form`组件，并且分别定义了自己的数据模型（`outerForm`和`innerForm`）。你可以根据实际需要添加更多的表单项。 请注意，在提交表单时，需要先校验外层表单的有效性，然后再校验内层表单的有效性。只有当两个表单都校验通过时，才会提交数据。 希望这个例子对你有所帮助！如果你还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值