html form 案例

最新推荐文章于 2022-10-01 21:09:34 发布
最新推荐文章于 2022-10-01 21:09:34 发布
阅读量520 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27084325/article/details/52167391
版权
html 同时被 2 个专栏收录
26 篇文章 0 订阅
订阅专栏
html5
9 篇文章 0 订阅
订阅专栏

--email.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用email</title>
<link href="email.css" rel="stylesheet" type="text/css">
</head>
<body>
<form id="frmTmp">
 <fieldset>
   <legend>请输入合法的邮件地址：</legend>
   <input name="txtEmail" type="email" 
          class="inputtxt" multiple="true">
   <input name="frmSubmit" type="submit" 
          class="inputbtn" value="提交">
 </fieldset>
</form>
</body>
</html>

emial.css 

@charset "utf-8";
/* CSS Document */
body {
	font-size:12px
}
.inputbtn {
	border:solid 1px #ccc;
	background-color:#eee;
	line-height:18px;
	font-size:12px
}
.inputtxt {
	border:solid 1px #ccc;
	padding:3px;
	line-height:18px;
	font-size:12px;
	width:160px
}
fieldset{
	padding:10px;
	width:280px;
	float:left
}
/* 实例4增加样式 */
#spnColor{
	width:150px;
	float:left
}
#spnPrev{
	width:100px;
	height:70px;
	border:solid 1px #ccc;
	float:right
}
#pColor{
	font-weight:bold; 
	clear:both;
	text-align:center
}
p{
	clear:both;
	padding:0px;
                   margin:8px;
}
.p_center{
	text-align:center
}
.p_color{
	color:#666
}



--url .html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用url类型</title>
<link href="url.css" rel="stylesheet" type="text/css">
</head>
<body>
<form id="frmTmp">
 <fieldset>
   <legend>请输入网址：</legend>
   <input name="txtUrl" type="url" 
          class="inputtxt" />
   <input name="frmSubmit" type="submit" 
          class="inputbtn" value="提交" />
 </fieldset>
</form>
</body>
</html>




--born.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用number类型</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<form id="frmTmp">
 <fieldset>
   <legend>输入您的出生时间：</legend>
   <input name="txtYear" type="number"
          class="inputtxt" min="1960" max="1990" 
          step="1" value="1990" />年
   <input name="txtMonth" type="number"
          class="inputtxt" min="1" max="12" 
          step="1" value="4"/>月
   <input name="txtDay" type="number"
          class="inputtxt" min="1" max="31" 
          step="1" value="23"/>日
   <input name="frmSubmit" type="submit" 
          class="inputbtn" value="提交" />
 </fieldset>
</form>
</body>
</html>



--time.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择日期</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<form id="frmTmp">
 <fieldset>
   <legend>日期+时间类型：</legend>
   <input name="txtDate_1" type="date"
          class="inputtxt">
   <input name="txtDate_2" type="time"
          class="inputtxt">
   </fieldset>
   <fieldset>
   <legend>月份+星期类型：</legend>
   <input name="txtDate_3" type="month"
          class="inputtxt">
   <input name="txtDate_4" type="week"
          class="inputtxt">
   </fieldset>
   <fieldset>
   <legend>日期+时间型：</legend>
   <input name="txtDate_5" type="datetime"
          class="inputtxt">
   <input name="txtDate_6" type="datetime-local"
          class="inputtxt">
 </fieldset>
</form>
</body>
</html>


--required.html 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用input元素</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<form id="frmTmp">
 <fieldset>
   <legend>属性required</legend>
   姓名:
   <input name="txtUserName" type="text" 
          class="inputtxt" required />
   <input name="frmSubmit" type="submit" 
          class="inputbtn" value="提交" />
 </fieldset>
</form>
</body>
</html>


--form.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用placeholder属性</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<form action="123.asp" method="get" autocomplete="on">
姓:<input type="text" name="fname" /><br />
名: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

<p>请填写并提交此表单，然后重载页面，来查看自动完成功能是如何工作的。</p>
<p>请注意，表单的自动完成功能是打开的，而 E-mail 域是关闭的。</p>
</body>
</html>


--file.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>

<form action="demo_form.asp" method="get">
Select images: <br/>
<input type="file" name="img" multiple="multiple" /><br/>
<input type="submit" />
</form>

<p>当您浏览文件时，请试着选择多个文件。</p>

</body>
</html>




qq_27084325
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML-06-form表单介绍及相应案例
LYM0411的博客
04-22 1320
form表单
表单 Form实例练习
m0_46636679的博客
05-13 349
<form> <!-- text文本 就是输入你想输入的文字 --> 用户名： <input type="text" name="username" id="username" placeholder="请输入用户名"> <br> <!-- 密码框 用户输入的密码前端看不见 --> 密码: <input type="password" name...
form表单案例
xiangwangdeshenghuo的博客
03-27 1272
做了一个表单，是在VSCode里写的 应用的表单元素 单行输入框—input 单选按钮------radio 下拉框---------select 多选按钮------checkbox 文本域---------textarea 上传文件------input type=“file” 元素说明 div是块级元素，自动换行 span标签被用来组合文档中的行内元素，通过样式来格式化它们。 opti...
HTML <form> 标签的 method 属性
weixin_30567225的博客
04-30 225
method 方法规定如何发送表单数据（form-data）（表单数据会被发送到在 action 属性中规定的页面中）。 可以通过以下方式发送 form-data ： 以 URL 变量 (使用 method="get") 的形式来发送 以 HTTP post (使用 method="post") 的形式来发送 关于 "get" 方法的注释： 该方法将表单数据以名称/...
HTML中Form表单的使用
热门推荐
pan_junbiao的博客
06-20 5万+
1、form表单标记 表单标记以<form>标记开头，以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。 <form>标记的基本语法如下： <form action="url" method="get | post" name="formName" onsubmit="" target=""> </for...
HTML.rar_html案例
09-23
这个“HTML.rar_html案例”压缩包包含的是一系列关于HTML语言教程的资料和实例，旨在帮助学习者掌握HTML的各种引用方法和实际应用。 1. **HTML基本结构**：HTML文档通常由`<!DOCTYPE html>`声明开始，接着是`<html>...
HTML实战案例
01-09
本压缩包"HTML实战案例"包含了HTML+CSS的各阶段实战练习代码，非常适合初学者进行实践操作，以加深对HTML基础知识的理解并提升实际应用技能。 HTML的基础结构由一系列的元素组成，这些元素以标签的形式嵌套在文档中...
html javascript css 案例
10-31
这些页面通常会包含`<form>`标签来创建表单，`<input>`元素让用户输入数据，以及`<button>`元素来触发JavaScript事件。HTML还可以通过`<link>`引用外部CSS文件，以实现样式控制。 接着，JavaScript 是一种脚本语言...
HTML之案例素材
09-06
在这个名为“HTML之案例素材”的压缩包中，我们很可能会找到一系列的HTML代码示例和实际的网页项目，这些资源对于学习和理解HTML语法、结构以及在实际应用中的使用非常有帮助。 HTML的基本元素包括标签，它们以尖...
一号店网站HTML案例
05-01
"一号店网站HTML案例"是一个非常适合初学者进行实践和提升HTML及CSS3技能的项目。这个案例涵盖了构建电商网站的基本元素和设计技巧，是检验学习成果并深化理解的理想选择。以下将详细介绍此案例中可能涉及的关键知识...
表单美化案例
07-06
表单美化案例：单选框、复选框、文本框、下拉列表美化！
html中Form学习实例
u010481606的专栏
06-30 401
注册表 用户名: 密码: 性别:男女 爱好:旅游美食打球 头像: 城市:长沙 娄底北京 个人简介:
form表单样式案例
侯春强的博客
09-06 4913
代码： Title * { margin: 0; padding: 0; font-size: large; } .all { height: 600px; width: 500px;
html综合表单例子
行善之人必有余庆
05-25 2160
提交表单 输入姓名: 选择你最喜欢的颜色: 红 绿 蓝 黄 请问你性别: 男 女 喜欢的事情: 看书 上网 睡觉 我要留言:
HTML5 from表单实例
sun_smile1的博客
04-01 1218
form action="跳转路径" method="get" id="qun"> --> fieldset>边框线--> legend>用户注册legend>边框标题--> table> tr> td>会员名：td> td>input type="text" name
表单综合案例
little_spice的博客
04-02 2219
html学了有一段时间了，感觉内容很简单但是很杂很多，需要记忆，学完表单结合那几个东西随便写了个案例复习一下。 <!doctype html> <html> <head> <title>表单综合案例</title> </head> <body> <form action='#' ...
HTML第三章 form表单(详解，内含详细代码示例)
a2499797637的博客
10-01 2649
1.特点 2. 表单的语法和属性 3. 表单的控件分类 4. input元素 5. select和下拉选择框 6. textarea多行文本域 7.label关联控件
H5获取光标的位置
萌萌程序员的博客
01-25 4618
1： 本实例是通过元素的autofocus属性实现的 主要功能: 是当加载页面完成后 设置光标是否自动锁定元素，即是否使元素自动获取焦点 在元素中，如果将该属性的值设置为TRUE，或直接输入autofocus属性名称，那么对应的元素将自动获取焦点 新的表单属性 1: autocomplete novalidate 2： 新的input属性 autocomplete aut
FRM-41839:在临时记录缓冲区文件/tmp/ztYpaa.tmp中磁盘的输入/输入错误
cm19771979的博客
07-17 757
错误提示：FRM-41839:在临时记录缓冲区文件/tmp/ztYpaa.tmp中磁盘的输入/输入错误原因：是/TMP目录的空间用完了解决办法：(从metalink上找的)fact: Oracle Application Obj...
html form表单提交案例
最新发布
09-07
HTML表单是网页中常用的一种交互元素，用于收集用户的输入数据并提交给服务器进行处理。下面以一个注册表单为例来说明HTML表单的提交过程。 一个简单的注册表单通常包括用户输入用户名、密码和确认密码等字段，并且有一个提交按钮。用户填写完表单后，点击提交按钮，就会触发表单的提交事件。 HTML表单的代码如下： ``` <form action="register.php" method="POST"> <label for="username">用户名：</label> <input type="text" id="username" name="username" required><br> <label for="password">密码：</label> <input type="password" id="password" name="password" required><br> <label for="confirm_password">确认密码：</label> <input type="password" id="confirm_password" name="confirm_password" required><br> <input type="submit" value="注册"> </form> ``` 上述代码中，`<form>`标签定义了一个表单，`action`属性指定了提交数据的目标地址，`method`属性指定了数据提交的方式。 用户填写表单后，点击提交按钮，表单数据将会被封装成一个HTTP请求，并发送给`register.php`文件。`register.php`文件是一个服务器端脚本，用于接收和处理表单数据。 `register.php`文件的代码如下： ```php <?php $username = $_POST['username']; $password = $_POST['password']; $confirm_password = $_POST['confirm_password']; // 进行数据验证和处理 // ... // 返回处理结果给用户 // ... ?> ``` `register.php`文件通过`$_POST`变量获取到表单提交的数据，并进行必要的验证和处理。在实际应用中，我们可以根据具体的需求来处理表单数据，比如将数据存储到数据库中，发送邮件通知等。 最后，`register.php`文件可以向用户返回处理结果，比如显示注册成功或失败的消息。你可以使用`echo`函数输出HTML代码来展示页面。 以上就是一个简单的HTML表单提交案例，它展示了HTML表单的基本使用和数据提交的过程。实际应用中，我们可以根据具体的业务需求来定制表单，并在服务器端对用户提交的数据进行处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值