表单提交、页面注册案例

最新推荐文章于 2023-09-14 11:30:41 发布
最新推荐文章于 2023-09-14 11:30:41 发布
阅读量426 收藏 4
点赞数 1
分类专栏： 前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44799217/article/details/115795239
版权

表单属性设置

<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="images/man.jpg" /> 男
                <input type="radio" name="sex" /><img src="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="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: 表单元素的值，用于作为提交表单数据时参数名所对应的值
IT之一小佬
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
form表单案例---注册表
A_light_sun的博客
10-12 465
注册表案例练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title_注册表</title> </head> <body> <form action="" method="po...
0829注册表单案例
WangJiaYi948的博客
08-29 360
&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;style&gt; tr { heig
表单注册控件的例子
yanick技术博客
08-24 812
把老同事公会的注册页面的javaScript的代码弄下来。让大家PPscript language="JavaScript">//-----------------------------------------------------------------    function checkRegForm()    {        var form = document.formRe
注册表单提交
m0_74033027的博客
01-12 739
4.在表单提交是，需要进行验证验证填写内容是否合理：昵称不超过10个字、姓名不超过4个字、QQ号为长度小于等于10大于5位的数字、手机号为长度11位的数字、密码由字母和数字组成且大于8位小于16位、密码和确认密码需相同。要展示不同效果，光标移入框内要将内部placeholder变为空字符串，光标移出再复原。1.表单需包含昵称、姓名、QQ、手机号、邮箱、密码、确认密码以及提交和重置按钮；2.利用正则表达式，判断输入的值是否符合正则表达式，不符合就显示提示。3.点击提交和重置按钮时，都需要有相应的提示；
Web前端第三季(JavaScript):十二:第4章: 表单校验案例:401-开发注册表单页面+402-表单提交事件和获取html元素+403-完成用户名和邮箱的校验
qq_40544338的博客
11-19 659
目录 一.目的 1.想：学习前端知识 2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。 二.参考 1.我自己代码的GitHub网址 2.SIKI学院:我参考此视频实操 3.w3school官网:当做字典使用 4.菜鸟教程：当做字典使用 三.注意 操作:1:成功:401-开发注册表单页面 1.运行结果:成功: 操作:2:成功:402-表单提交事件和获取html元素 1.运行结果:成功:form onsubmit="check()"当提交表单时候的事件 2.运行结果:成功
JavaScript 完成注册页面表单校验的实例
12-10
1、步骤分析 第一步：确定事件(onsubmit)并为其绑定一个函数 第二步：书写这个函数(获取用户输入的数据&...2、完成注册页面表单校验 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
Ajax提交与传统表单提交的区别说明
12-08
Ajax提交是通过js来提交请求，请求与响应...2.AJAX开发相较传统模式的简单之处：传统模式下，表单提交则整个页面重绘，为了维持页面用户对表单的状态改变，要多些不少代码。要在控制器和模板之间传递更多参数以保持页面
Ajax提交post请求案例分析
12-10
页面中主要有一个表单，使用了onsubmit事件，在onsubmit事件中首先获取准备post的内容，然后创建XMLHttpRequest对象，接着确定请求参数，然后重写回调函数，在函数中主要是根据请求的状态来使用服务器端返回值，然后...
HTML 使用表单标签实现注册页面的实例代码
12-14
　- 使用图片标签提交表单 <input type="image" src="图片的路径"/>   完整代码：   <html> <head> <title>World</title> </head> <body> <form action="01-...
房贷计算器-表单提交案列
01-02
表单提交案例，支持非空、数字、正则验证
jQuery完整注册表单提交验证
10-13
jQuery表单提交验证verify一套完整的用户注册前端校验，包含用户名，密码强度，显示隐藏密码，手机号输入控制手机验证码，真实姓名，身份证号等验证。
用户注册时表单的校验以及提交（css,html,javascript）
qq_46274901的博客
01-23 824
用户注册时表单的校验以及提交
注册页面案例
Major_S的博客
10-02 1146
注册页面案例注册页面案例注册页面案例 标签名 作用 备注 form 表示表单，是用来收集用户输入信息并向 Web 服务器提交的一个容器 举例： <form > //表单元素 </form> 表单的属性 属性名 作用 备注 action 处理此表单信息的Web服务器的URL地址 method 提交此表单信息到Web服务器的方式 可能的值有get和post，默认为get autocomplete 自动补全，指示表单元素是否能够拥有
form表单提交及验证实例
weixin_52374211的博客
04-04 202
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>form表单提交实例</title> <style> .m-form{ margin: 150px auto; width: 325px; border: 1px solid #ddd; } .m-form legend{ width: 10.
案例四：注册表单提交验证的完善
真香号
05-24 611
用户提交信息以后对每一个输入框进行验证。并提示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页面</title> <script> function checkForm() { // alert("a...
Servlet的5种方式实现表单提交（注册小功能），后台获取表单数据
lulula的博客
04-18 1万+
用servlet实现一个注册的小功能 ，后台获取数据。 注册页面： 　　 注册页面代码 ： DOCTYPE html> html> head> meta charset="UTF-8"> title>Insert title heretitle> head> body> form action="/RequestDemo/RequestDemo3" method="post
用户注册页面的设计与实现（html+css）
热门推荐
ZYCRY的博客
11-03 2万+
用户注册页面的设计与实现（html+css） 文章目录用户注册页面的设计与实现（html+css）1.目的2.内容3.步骤4.代码实现5.页面展示6.最后 1.目的 熟悉HTML+CSS 及表单知识的应用 2.内容 使用 HTML5 表单技术实现用户注册页面，要求用户可以输入用户名、密码、真实姓名和电子邮箱等信息进行注册。 具体功能如下： 界面设计 表单设计 使用 input 标签的 email 类型实现电子邮箱验证 使用 input 标签的 autocomplete 属性实现内容自动记
服务器交互-用户注册表单信息获取及显示
最新发布
m0_63359528的博客
09-14 167
服务器交互-用户注册表单信息获取及显示
使用JDBC完成登录和注册页面
weixin_73667562的博客
02-17 2181
HTTP是超文本传输协议的英文缩写，是基于TCP/IP通讯协议之上用来传输HTML和图片文件的应用协议，原本是用来从万维网服务器传输超文本到本地浏览器。它是一个应用层面向对象的协议，优点是简捷，快速，适用于分布式超媒体信息系统。于1990年提出，经过多年的完善和扩展已经非常地成熟。HTTP协议主要工作于B-S架构之上，这个时候浏览器作为HTTP的客户端通过URL向HTTP的服务器(weh服务器)发送所有请求，web服务器根据接收到的请求后，向客户端发送响应信息。
html form表单提交案例
09-07
下面以一个注册表单为例来说明HTML...以上就是一个简单的HTML表单提交案例，它展示了HTML表单的基本使用和数据提交的过程。实际应用中，我们可以根据具体的业务需求来定制表单，并在服务器端对用户提交的数据进行处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值