表单提交、页面注册案例

表单属性设置

<form>标签表示表单标签，定义整体的表单区域

action属性设置表单数据提交地址
method属性设置表单提交的方式，一般有“GET”方式和“POST”方式, 不区分大小写【‘get’和‘post’是HTTP协议】

【get方式提交数据到web服务器以地址栏的方式提交给服务器不安全，能够看到提交的数据，严谨的说是以查询参数的方式提交给web服务器；post方式提交数据表单数据会放到请求体里面】

表单元素属性设置

name属性设置表单元素的名称，该名称是提交数据时的参数名
value属性设置表单元素的值，该值是提交数据时参数名所对应的值

表单提交案例

 <form action="https://www.baidu.com" method="GET"><p><label>姓名：</label><input type="text" name="username" value="张三" /></p><p><label>密码：</label><input type="password" name="password" /></p><p><label>性别：</label><input type="radio" name="gender" value="0" /> 男<input type="radio" name="gender" value="1" /> 女</p><p><label>爱好：</label><input type="checkbox" name="like" value="sing" /> 唱歌<input type="checkbox" name="like" value="run" /> 跑步<input type="checkbox" name="like" value="swiming" /> 游泳</p><p><label>照片：</label><input type="file" name="person_pic"></p><p><label>个人描述：</label><textarea name="about"></textarea></p><p><label>籍贯：</label><select name="site"><option value="0">北京</option><option value="1">上海</option><option value="2">广州</option><option value="3">深圳</option></select></p><p><input type="submit" name="" value="提交"><input type="reset" name="" value="重置"></p>
</form>

运行效果：

页面注册案例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注册页面</title>
</head><body><!-- 为了看清界面的排版，写代码时可以先加上border值 --><!-- <table width="600" border="1" align="center"> --><table width="600" align="center"><caption><h4>欢迎来到注册页面</h4></caption><!-- 1 --><tr><td>性别</td><td><input type="radio" name="sex" checked='checked' /><img src="data:images/man.jpg" /> 男<input type="radio" name="sex" /><img src="data:images/women.jpg" /> 女</td></tr><!-- 2 --><tr><td>生日</td><td><!-- 年份的 --><select name="" id=""><option value="">--请选择年份--</option><option value="">1995</option><option value="">1996</option><option value="">1997</option></select><!-- 月份的 --><select name="" id=""><option value="">--请选择月份--</option><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option></select><!-- 日子 --><select name="" id=""><option value="">--请选择日子--</option><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option><option value="">5</option></select></td></tr><!-- 3 --><tr><td>所在地区</td><td><input type="text" value="北京市朝阳区"></td></tr><!-- 4 --><tr><td>婚姻状况</td><td><input type="radio" name="marry" checked="checked" /> 未婚<input type="radio" name="marry" /> 已婚<input type="radio" name="marry" /> 离婚</td></tr><!-- 5 --><tr><td>学历</td><td><input type="text" value="研究生"></td></tr><!-- 6 --><tr><td>月薪</td><td><input type="text" value="10000-20000"></td></tr><!-- 7 --><tr><td>手机号码</td><td><input type="text"></td></tr><!-- 8 --><tr><td>昵称</td><td><input type="text" ></td></tr><!-- 9 --><tr><td>喜欢的类型</td><td><input type="checkbox" name="love" /> 妩媚的<input type="checkbox" name="love" /> 可爱的<input type="checkbox" name="love" /> 小鲜肉<input type="checkbox" name="love" /> 老腊肉<input type="checkbox" name="love" /> 都喜欢</td></tr><!-- 10 --><tr><td>自我介绍</td><td><textarea name="" id="" cols="30" rows="5">自我介绍</textarea></td></tr><!-- 11 --><tr><td></td><td><input type="image" src="data:images/btn.png" /></td></tr><!-- 12 --><tr><td></td><td> <input type="checkbox" name="agree" checked="checked" />我同意注册条款和会员加入标准</td></tr><!-- 13 --><tr><td></td><td><a href="#">我是会员，立即登录</a></td></tr><!-- 14 --><tr><td></td><td><h3>我承诺</h3><ul><li>年满18岁</li><li>谨遵入会规则</li></ul></td></tr></table></body></html>

运行效果：

小结

表单标签的作用就是可以把用户输入数据一起提交到web服务器。
表单属性设置
- action: 是设置表单数据提交地址
- method: 是表单提交方式，提交方式有GET和POST
表单元素属性设置
- name: 表单元素的名称，用于作为提交表单数据时的参数名
- value: 表单元素的值，用于作为提交表单数据时参数名所对应的值

表单提交、页面注册案例相关推荐

Pyhon Django 表单类ModelForm注册案例（可直接操作数据库）
PHP处理Checkbox复选框表单提交
PHP表单提交页面复选框的名称后要加[],这样在接收页面才能得到正确的结果.表单提交后得到的是一个数组,然后通过访问数组元素得到表单的具体vaule值.得到的checkbox1的值,默认有</b ...
原生JS 表单提交验证器
一.前言最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过"缜密"的讨论后,我们决定不用外部流行的框架,如bootstrap,由于我负责的模块仅仅是其中的一部分, ...
jquery按钮置灰_Jquery 实现表单提交按钮变灰，防止多次点击提交重复数据
表单提交时候我们应该控制提交按钮,不能点击多次进行数据的重复提交.要不然就会有冗余的重复的数据在系统中,造成系统出现数据垃圾.jQuery很简单的就可以实现对表单提交按钮控制,下面就是相关的例子和代码 ...
[JSP暑假实训] 二.JSP网站创建及Servlet实现注册表单提交、计算器运算
本系列文章是作者暑假给学生进行实训分享的笔记,主要介绍MyEclipse环境下JSP网站开发,包括JAVA基础.网页布局.数据库基础.Servlet.前端后台数据库交互.DAO等知识. 本篇文章开始讲 ...
html页面关闭前提示信息,【转】表单提交及关闭当前页面并刷新数据
在DWZ文档中,对于DWZ框架Ajax无刷新表单提交处理流程描述如下: 1. ajax表单提交给服务器 2. 服务器返回一个固定格式json结构 3. js会调函数 ...
vue 添加完数据后刷新页面_vue form 表单提交后刷新页面的方法
最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数 ...
php阻止form提交表单提交,防止表单提交时刷新页面-阻止form表单的默认提交行为...
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
ajax刷新iframe页面,通过iframe实现简单的ajax表单提交
之前做项目都是用现成的jquery插件实现表单的校验以及ajax提交,但是今天有个简单的头像图片ajax上传,以及一个很简单的表单提交,实在不想引入一个插件了,本着代码量最小,最简单的原则,照着豆瓣照 ...

表单提交、页面注册案例

表单属性设置

表单元素属性设置

表单提交案例

页面注册案例：

小结

表单提交、页面注册案例相关推荐

最新文章

热门文章