web前端学习(四)——HTML 表单(1)- 用户注册表单举例

article/2025/9/23 21:56:32

表单:就是类似于登录界面,用于接收用户的信息。(如下图的微博登录界面所示)

 表单以<form>开始,以</form>结束。
1、表单有什么用?
        收集用户信息。表单展现之后,用户填写表单,点击提交按钮提交数据给服务器。
2、怎么画一个表单?
        使用form标签画表单。
3、一个网页当中可以有多个表单form。
4、表单最终是需要提交数据给服务器的,form标签有一个action属性,这个属性用来指定服务器地址:action属性和超链接中的href属性一样,都可以向服务器发送请求(request)
5、<form action="http://192.168.111.3:8080/oa/save"> </form> :               
        其中 http://192.168.111.3:8080/oa/save 是请求路径,表单提交数据最终提交给:192.168.111.3机器上的8080端口对应的软件。

按钮:
1、在网页中需要画一个提交按钮,用来提交表单。
2、画按钮可以使用input输入域,type="submit"的时候表示该按钮是一个提交按钮,具有提交表单的能力。 而button只是一个普通按钮,不具备提交表单的能力。(type后面不能随便写)
3、对于按钮来说,按钮的value属性用来指定按钮上显示的文本信息。如果没有value,显示的是提交。
(有value)
(没有value)
4、text能够显示文本框:<input type=“text”>
(百度按钮前面的文本框)

代码举例:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="http://192.168.111.3:8080/oa/save"><input type="submit" value="注册"/><input type="button" value="设置按钮上显示的文本"/></form><!--这个按钮和普通的超链接没有太大的区别。超链接和表单都可以向服务器发送请求,只不过表单发送请求的同时可以携带数据。--><form action="http://www.baidu.com"><!--<input type="text">--><input type="submit" value="百度"> </form></body>
</html>


表单(form)和列表(table)相结合的运用: 
1、表单是以什么格式提交给服务器的?(非常重要)
        http://localhost:8080/jd/login?username=abc&userpwd=116
        格式:cation?name=value&name=value&name=value&name=value.....
        W3C的HTTP协议规定的,必须以这种格式提交给服务器
重点强调:表单项写了name属性的,一律会提交给服务器;不想提交这一项,就不要写name属性。
文本框和密码框的value不需要程序员指定,用户输入什么,value就是什么。

2、当name没有写的时候,该项不会提交给服务器。
但是当value没有写的时候,value的默认值是空字符串“”,会将空字符串提交给服务器。
Java代码得到的是:string username = " ";

		<form action="http://localhost:8080/jd/login"><table><tr><td>用户名</td><td><input type="text" name="username"></td></tr><tr><td>密码</td><td><input type="password" name="userpwd"></td></tr><tr align="center"><td colspan="2"><input type="submit" value="登录" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="清空" ></td></tr></table></form>

运行结果:(实际操作中点击登录和清空都会使网页产生反应)
 


form表单method属性:
        get:采用get方式提交的时候,用户提交的信息会显示在浏览器的地址栏上。
        post:采用post方式提交的时候,用户提交的信息不会显示在浏览器的地址上。
        当用户提交的信息中含有敏感信息,例如:密码,建议采用post方式提交。
method属性不指定,或者指定get,这种情况下都是get。
只有当method属性指定为post的时候才是post请求。
剩下的所有请求都是get请求(如:超链接)

用户注册表单代码举例:<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>用户注册的表单</title></head><body><!--用户注册:用户名密码确认密码性别兴趣爱好学历简介--><form action="http://localhost:8080/jd/register" method="post">用户名 <input type="text" name="username"><br>密码 <input type="password" name="userpwd"><br>确认密码 <input type="password" ><br>性别 <input type="radio" name="sex" value="1"> 男<input type="radio" name="sex" value="0" checked> 女 <!--单选按钮的value必须手动指定--><br>兴趣爱好 <input type="checkbox" name="interest" value="smoke"> 抽烟<input type="checkbox" name="interest" value="drink" checked> 喝酒<input type="checkbox" name="interest" value="fire"> 烫头<br>学历<select name="grade" ><option value="gz">高中</option><option value="dz">大专</option><option value="bk" selected>本科</option><option value="ss">硕士</option></select><br>简介<!--文本域,文本域没有value属性,用户填写的内容就是value--><textarea rows="10" cols="60" name="introduce"></textarea><br><input type="submit" value="注册"><input type="reset" value="清空"></form></body>
</html>


http://chatgpt.dhexx.cn/article/CkfELr6X.shtml

相关文章

注册表单 html+css

简洁注册表单 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>注册</title><link rel"stylesheet" href"public.css"><link rel"stylesheet" href&quo…

linux系列之常用运维命令整理笔录

系列博客专栏&#xff1a; JVM系列博客专栏SpringBoot系列博客 本博客记录工作中需要的linux运维命令&#xff0c;大学时候开始接触linux&#xff0c;会一些基本操作&#xff0c;可是都没有整理起来&#xff0c;加上是做开发&#xff0c;不做运维&#xff0c;有些命令忘记了&…

50个Linux常用命令

1.查看主机名:hostname 2.查看当前工作目录:pwd 3.切换工作目录:cd 4.查看目录: ls -l 长格式 -a全部显示 -d显示目录属性 -h人性化 -R递归显示 5.查看系统版本 lsb_release -a 6.查看cpu cat/cpu/cpuinfo 7.查看内存 cat/proc/meminfo 8.关机 shutdown -h now 、poweroff 、…

linux下解压gz文件夹提示格式不对,在Linux解压tar.gz文件时提示gzip:stdin:not的解决问题...

不经意间我们又来到了Linux系统文章的学习&#xff0c;在众多学习中&#xff0c;我们的文章也许不起眼&#xff0c;但是想必大家都有很多问题吧&#xff0c;所以重要的下面我们就来讲解一下&#xff0c;大家一定要认真看奥&#xff01;&#xff01; 我们都知道Linux系统下的tar…

Red Hat Linux Shell命令

文章目录 一、辅助快捷键二、基本命令三、用户命令四、关于文件目录的命令五、压缩文件命令六、安装命令五、网络 “-”&#xff1a;引导短格式选项&#xff08;单个字符&#xff09;如&#xff1a;-l多个短格式选项可以写在一起&#xff0c;用一个"-"引导 如&#x…

Linux常用命令/查找/搜索命令/压缩/解压命令网络命令

在线课堂&#xff1a;https://www.100ask.net/index&#xff08;课程观看&#xff09; 论  坛&#xff1a;http://bbs.100ask.net/&#xff08;学术答疑&#xff09; 开 发 板&#xff1a;https://100ask.taobao.com/ &#xff08;淘宝&#xff09;      https://weid…

linux tar -czvf 详解,Linux tar命令详解

当你想要压缩一大堆文件时,你得先将这一大堆文件先打成一个包(tar命令),然后再用压缩程序进行压缩(gzip bzip2命令) tar常见命令参数 必要参数有如下: -A 新增压缩文件到已存在的压缩 -c 建立新的压缩文件 -d 记录文件的差别 -r 添加文件到已经压缩的文件 -u 添加改变了和现…

Java中几种常量池(字符串常量池, Class常量池, 运行时常量池)的区别与联系

简介&#xff1a; 这几天在看Java虚拟机方面的知识时&#xff0c;看到了有几种不同常量池的说法&#xff0c;然后我就去CSDN、博客园等上找资料&#xff0c;里面说的内容真是百花齐放&#xff0c;各自争艳&#xff0c;因此&#xff0c;我好好整理了一下&#xff0c;将我自认为…

Java字符串常量池详解(StringTable)

前言&#xff1a;在介绍字符串常量池之前&#xff0c;我们先来简单了解下Java中字符串的概念以及常见的一些问题. 参考书籍&#xff1a; 《Java核心技术》 参考网站&#xff1a;牛客 作者水平很有限&#xff0c;如果发现错误&#xff0c;麻烦及时告知作者哦&#xff01;十分感谢…

java常量池在哪里_java常量池在哪?有什么用处?

为了更方便的使用对象&#xff0c;常量池是我们需要了解的必要一环&#xff0c;下面来看看常量的用处及它的存放地点。 Java常量池存放地点在哪? 如图&#xff1a; 在Java6和6之前&#xff0c;常量池一般是存放在方法区中的&#xff0c;到了Java7&#xff0c;常量池就被存放到…

Java常量池理解

Java常量池理解 常量池分为两种&#xff1a;静态常量池和运行时常量池。 静态常量池 每个类在编译之后都会生成class文件&#xff0c;而class文件中就包含有静态常量池&#xff0c;分析class文件&#xff0c;如下图所示&#xff1a; 由于常量池中的常量的数量不是固定的&…

Java 常量池详解(二)class文件常量池 和 Java 常量池详解(三)class运行时常量池

Java 常量池详解&#xff08;一&#xff09;字符串常量池 2.class文件常量池&#xff08;class constant pool&#xff09; 产生时机&#xff1a;当java文件被编译成class文件之后&#xff0c;就会生成class常量池&#xff0c;跟jvm 无关系 常量池主要存放两大类常量&#xff…

java 查看类常量池_Java中常量以及常量池

1、举例说明 变量 常量 字面量 1 int a=10;2 float b=1.234f;3 String c="abc";4 final long d=10L; a,b,c为变量,d为常量 两者都是左值;10,1.234f,"abc",10L都是字面量; 2、常量池: 常量池专门用来用来存放常量的内存区域,常量池分为:静态常量池…

一文解析Java常量池、静态常量池、运行时常量池和字符串常量池的区别与联系

Java常量池关系图 Java常量池 Java常量池是Java编译器在编译Java源代码时&#xff0c;为了优化性能和节省空间所创建的一种常量缓存机制。它包含了所有的基本数据类型、字符串常量、符号引用等常量&#xff0c;这些常量都是在编译期被确定下来的&#xff0c;并被存储在.class文…

java常量池总结

java常量池 1.class常量池2.运行时常量池3.基本类型包装类常量池4.字符串常量池 1.class常量池 在JAVA中&#xff0c;Java类&#xff08;.java&#xff09;文件被编译后就会形成一份class文件&#xff1b;class文件中除了包含类的版本、字段、方法、接口等描述信息外&#xff…

java号码池_Java常量池详解

jvm虚拟内存分布图&#xff1a; 程序计数器&#xff1a;JVM执行程序的流水线。 本地方法栈&#xff1a;JVM调用操作系统方法所使用的栈。 虚拟机栈&#xff1a;JVM执行Java代码所使用的栈。 方法区&#xff1a;存放一些常量、静态变量、类信息等&#xff1b;可以理解为class文件…

java常量池在哪里_【Java基础】Java常量池在哪里? - 收获啦

1.java常量池的介绍 java中的常量池&#xff0c;通常指的是运行时常量池&#xff0c;它是方法区的一部分&#xff0c;一个jvm实例只有一个运行常量池&#xff0c;各线程间共享该运行常量池。 java常量池简介&#xff1a;java常量池中保存了一份在编译期间就已确定的数据。它里面…

java静态池_java 常量池静态变量详解

Java中的常量池&#xff0c;实际上分为两种形态&#xff1a;静态常量池和运行时常量池。 所谓静态常量池&#xff0c;即*.class文件中的常量池&#xff0c;class文件中的常量池不仅仅包含字符串(数字)字面量&#xff0c;还包含类、方法的信息&#xff0c;占用class文件绝大部分…

java常量池在哪里_Java常量池详细说明

java常量池技术 java中的常量池技术&#xff0c;是为了方便快捷地创建某些对象而出现的&#xff0c;当需要一个对象时&#xff0c;就可以从池中取一个出来(如果池中没有则创建一个)&#xff0c;则在需要重复创建相等变量时节省了很多时间。常量池其实也就是一个内存空间&#x…

java中常量池存的是什么_Java中常量池是什么?Java常量池的介绍

本篇文章给大家带来的内容是关于Java中常量池是什么?Java常量池的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 Java当中的常量池 在Java虚拟机jvm中,内存分布为:虚拟机堆,程序计数器,本地方法栈,虚拟机栈,方法区。 程序计数器是jvm执行程序的…