Html中Form表单案例综合分析

通过一个案例来总结一下之前学过的东西，因为一直没总结，觉得自己都会了，然而敌不过遗忘。借此机会，正好作为笔记。

From表单

在from表单中可以进行前后端的数据交互。以下是部分属性：

form：

method(提交方式)：get / post

action(提交的地址)：

target(目标打开的方式)：_blank / _self / _parent / _top / framename

input：

type(输入框类型):text / password / button / submit / radius / checkbook

name(输入的值类型):

value(输入的值):

button：

submit：

相信。。。看这篇博客你应该是对Form有所了解，或者你继续一个Form模板。。。。。那你看对了，我就给你一个模板案例：（这个模板是可以在直接用的）

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta name="viewport" content="width=device-width, initial-scale=1"><title>提交表单</title><style type="text/css">body{background: #d3fef4;background-image: url("http://pic.netbian.com/uploads/allimg/190902/201404-15674264444b34.jpg");/*设置背景图片*/background-repeat:no-repeat;/*图片适应窗口大小，这里设置的是不进行平铺*/background-attachment: fixed;/*图片相对于浏览器固定,这里设置背景图片固定，不随内容滚动*/background-origin: border-box;/*从边框区域显示*/background-size:cover;color:white;font-size:20px;}.button{background-color: #b3fcfe;border-radius: 4px;border: none;color: #000000;padding: 10px 30px;text-align: center;text-decoration: none;display: inline-block;font-size: 15px;}.list{background-color: rgba(210, 247, 255,0.9);color: black;line-height:30px;}</style>
</head>
<body>
<div class="top"><h2>招聘页</h2><P>奇怪的知识增加了，今日的沙雕有你嘛？如果有的话，那我们就品一下？报名，报名我就看到了~</P>
</div>
<div ><fieldset class="list"><legend >需要填写一下内容</legend><form method="get"  name="form1" action="submit.html"><!-- <lable name="">中的name 与 id 相联系 --><label for="name">姓名：<input type="text" id="name" name="name" required="required"  placeholder="必填"/></label><!-- 单选框想要实现同一组，必须使用name 属性 --><div>性别：<label for="man"><input type="radio" value="男" name="sex" id="man" checked="checked" />男</label><label for="woman"><input type="radio" value="女" name="sex" id="woman"/>女</label></div><label for="yearsold">年龄范围：<select name="yearsold" id="yearsold"><option value="18岁以下">18岁以下</option><option value="18-28岁">18-28岁</option><option value="28-38岁">28-38岁</option><option value="38-48岁">38-48岁</option><option value="48岁以上">48岁以上</option></select></label><br/><label>爱好：<!-- 同样使用name属性进行分组设置  --><input type="checkbox" name="like" value="下次一定"/>下次一定<input type="checkbox" name="like" value="下次也不一定"/>下次也不一定<input type="checkbox" name="like" value="白嫖到底"/>白嫖到底<input type="checkbox" name="like" value="白嫖失败"/>白嫖失败</label><br /><label>电子邮件:<input type="email" name="email" /></label><br/><label>固定电话：<input type="tel" name="tel" pattern="([0-9]{7})|([0-9]{11})" placeholder="0-9的7位或11位数字"/></label><br/><label>公司：<input type="text" id="company" name="company" required="required" placeholder="必填"/></label><br/><!-- rows行 cols列 --><label>备注信息：<textarea name="intro" rows="2" cols="15" placeholder="备注"></textarea></label><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="button" type="reset">取消</button>&nbsp;&nbsp;&nbsp;&nbsp;<button class="button" type="submit" id="btn" >发送</button></form></fieldset>
</div>
<script>submit=location.search;submit=decodeURIComponent(submit);var formlist=submit.split("&");console.log(formlist);check_val = [];if(formlist.length>7){for(var i=3;i<=formlist.length-5;i++){var n = formlist[i].split("=");// console.log(n[1]);check_val.push(n[1]);}console.log(check_val);}var name = formlist[0].split("=")[1];// console.log(formlist[0]);var sex = formlist[1].split("=");var yearsold = formlist[2].split("=");var email = formlist[formlist.length-4].split("=");var tel = formlist[formlist.length-3].split("=");var company = formlist[formlist.length-2].split("=");var intro = formlist[formlist.length-1].split("=");var test=window.open("../test/submit.html");test.document.write("<style type=\"text/css\">"+"body\n" +"        {\n" +"            background: #d3fef4;\n" +"            background-image: url(\"http://pic.netbian.com/uploads/allimg/190902/201404-15674264444b34.jpg\");" +"            background-repeat:no-repeat;" +"            background-attachment: fixed;" +"            background-origin: border-box;" +"            background-size:cover;\n" +"            color:white;" +"            font-size:20px;" +"            padding:20px;"+"        }"+".list{\n" +"            background-color: rgba(210, 247, 255,0.9);\n" +"            color: black;\n" +"            line-height:30px;\n" +"        }"+"</style>"+"<div class='list'>"+"<p>"+"姓名："+name+"</p>"+"<p>"+"性别："+sex[1]+"</p>"+"<p>"+"年龄："+yearsold[1]+"</p>"+"<p>"+"爱好："+check_val+"</p>"+"<p>"+"Email："+email[1]+"</p>"+"<p>"+"电话："+tel[1]+"</p>"+"<p>"+"公司："+company[1]+"</p>"+"<p>"+"备注："+intro[1]+"</p>"+"</div>");
</script>
</body>
</html>

Html中Form表单案例综合分析相关推荐

[转]Joomla! 1.5中form表单的实现方式
原文链接:Joomla! 1.5中form表单的实现方式 Joomla! 1.5中JParameter不但提供了一个xml 和ini文件读取和访问的方式,同时它提供了一个render函数,这个rend ...
html中form表单标签的使用
在html中,表单是经常用到的,用来与用户交互并提交数据.今天要介绍的就是表单标签form标签 "form"作为英文单词有"表格"的意思 1.定义和用法标签是 ...
php同时接受get post,php中form表单同时使用POST和GET传递参数说明
摘要腾兴网为您分享:php中form表单同时使用POST和GET传递参数说明,同花顺,淘集集,尚游戏,美食天下等软件知识,以及医联网,recovernt,wifi控制,音效驱动,板栗直播,畅想听吧, ...
修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
vue中form表单支持回车键提交踩坑
平时我们项目中的列表页面通常都有条件搜索,为了使用方便通常都会支持回车搜索. 此功能的实现普遍做法是:为form表单添加 @keydown.enter.native="自定义方法名称&quo ...
HTML中form表单的应用
1.form表单标记 form表单以<form>标记开始,以</form>标记结束而在form表单中的属性 action 规定当提交表单时向何处发送表单数据. method ...
html中form表单提交和阻止表单提交的细节
如何阻止表单提交 HTML禁止表单提交方法源代码如下: form2.html <!DOCTYPE html> <html> <head> <meta cha ...
Vue中form表单提交问题
关于input组件回车后,默认提交form表单出现的问题: <div class="searchArea"><form action="###&quo ...
Html5的form表单案例
form表单应用场景:提供给用户输入的位置作用:将客户端用户输入的数据送到服务器端 <!DOCTYPE html> <html><head><meta c ...

Html中Form表单案例综合分析

通过一个案例来总结一下之前学过的东西，因为一直没总结，觉得自己都会了，然而敌不过遗忘。借此机会，正好作为笔记。

Html中Form表单案例综合分析相关推荐

最新文章

热门文章