JAVA全栈学习：HTML（二）：列表

最新推荐文章于 2024-05-08 13:18:20 发布
最新推荐文章于 2024-05-08 13:18:20 发布
阅读量142 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45965358/article/details/113916994
版权

文章目录

一.列表

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>苹果</li>
    <li>梨</li>
    <li>香蕉</li>
</ul>
<ol>
    <li>苹果</li>
    <li>梨</li>
    <li>香蕉</li>
</ol>
<ul>
    <li type = "A">苹果</li>
    <li type = "a">梨</li>
    <li type = "1">香蕉</li>
    <li type = "I">苹果</li>
    <li type = "circle">苹果</li>
    <li type = "square">梨</li>
    <li type = disc>香蕉</li>
</ul>
</body>
</html>

在这里插入图片描述

二.表单

格式：

<form>
.
input 元素
.
</form>

实例分析：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action = "http://192.168.111.3:8080/oa/save">

    </form>
</body>
</html>

在上面的程序当中，form为一个表单，action属性用来指定数据提交给哪个服务器，http://192.168.111.3:8080/oa/save为请求路径，表单数据最终提交给http://192.168.111.3机器上所对应的8080端口所对应的软件。

文本域

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

在这里插入图片描述

密码框

<form>
	 密码：<label><input type = "password" name = "password" ></label>
</form>

在这里插入图片描述

普通按钮

<form>
	 <label><input type = "button"></label>
</form>

在这里插入图片描述
注意：value的值可以显示在按钮的上面。

<form>
	 <label><input type = "button" value = "我的按钮"></label>
</form>

在这里插入图片描述

提交按钮

<form name="input" action="http://192.168.111.3:8080/oa/save" method="get">
	Username: <input type="text" name="user">
			  <input type="submit" value="Submit">
</form>

在这里插入图片描述
点击它会将数据传输给服务器

清空按钮

<form>
	清空：<label><input type = "reset" name = "reset" ></label>
</form>

在这里插入图片描述

提交过程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action = "http://192.168.111.1:8080/oa/save">

    </form>
    <br>
    <form>

        First name:<label><input type = "text" name = "First name"></label><br>
        Last  name:<label><input type = "text" name = "Last name"></label><br>
         <label><input type = submit></label><br>

         <label><input type = "button"></label>
         <label><input type = "button" value = "9999" name = "我的按钮"></label><br>
         密码：<label><input type = "password" value = "passwordvalue" name = "password"></label>
         清空：<label><input type = "reset"></label>
    </form>
</body>
</html>

提交前我的导航栏的地址为如下：

http://localhost:63342/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/Project/form.html?_ijt=i8934cqe7e8f58lkk5nm8g0ikc

填写提交如下：（密码123456）
在这里插入图片描述
提交后的导航栏地址如下：
http://localhost:63342/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/Project/form.html?First+name=ABC&Last+name=def&password=123456

我们重点看一下？后面的内容，可以看到，表单一律填写name的都会提交给服务器，其中&是分割符号。表单提交给服务器name和value。

文本框和密码框的value不用程序员填写，该value会自动填上用户所填写的内容。
当value没有填写的时候，value的默认值为空。

单选按钮

<form>
        <input type="radio" name="sex" value="male">Male<br>
        <input type="radio" name="sex" value="female">Female
</form>

在这里插入图片描述

复选按钮

<form>
	<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
	<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

在这里插入图片描述

下拉支持多选

<form action="">
<select name="cars">
	<option value="volvo">Volvo</option>
	<option value="saab">Saab</option>
	<option value="fiat">Fiat</option>
	<option value="audi">Audi</option>
</select>
</form>

在这里插入图片描述
要预选的，可以加属性selected.
还有一种下拉列表：

<form action="">
        <select name="cars" multiple = "multiple">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="fiat">Fiat</option>
            <option value="audi">Audi</option>
        </select>
    </form>

在这里插入图片描述
按住ctrl才可以选中，也可以加属性size=（值）来指定选中的个数。

form的file控件

<form>
        <input type = "file" >
 </form>

form的hidden控件

<form>
        <input type = "hidden" name = "sex" value = "111">
</form>

注意，这个内容我们是看不到的，但仍然可以发给服务器。

三.get和post请求

get请求（默认）：请求的内容会显示在地址栏上，如上面。
post请求：请求的内容形式跟get一样，但是不会显示在地址栏上。

一个post请求如下：

form method = post>
	<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
	<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

四.readonly和disabled

<form>
        用户姓名：<label><input type = "text" value = "uesrname" name = "username" readonly></label><br>
        用户代码：<label><input type = "text" value = "uesrcode" name = "uesrcode" disabled></label><br>
                  <label><input type = "submit"></label><br>
</form>

在这里插入图片描述
提交前：http://localhost:63342/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/Project/form.html?_ijt=q6ahmd5ot6l7lmejnumttl718i
提交后：http://localhost:63342/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/Project/form.html?username=uesrname

这两个都能使得用户无法修改其中的内容，即使有name属性，它们的不同是之处是readonly不能提交给服务器，但是disabled能提交给服务器。

五.maxlength

主要用于限制输入的文本框的字数。

<form>
        <input type = "text" name = "sex" maxlength = "3"><br><br>
</form>

如下图，当我输入123后不能再输入。

在这里插入图片描述

Listener-1379
关注
专栏目录
从搬砖工到架构师，Java全栈学习路线总结
zhangxia_的博客
05-07 2万+
Java 全栈开发技术是一种整合多种技术的开发方式，涉及众多领域，如：前端、后端、数据库等。Java 全栈开发技术的全面普及，使得该领域成为了就业和职业发展的焦点。为了快速入门 Java 全栈开发，我们可以从下面的路线开始学习。 Java 全栈开发需要不断地学习和实践，掌握优秀的编程习惯和实现技巧非常重要。在 Java 全栈开发的旅途中，我们需要关注技术的动态发展，随时更新自己的技能和知识体系。
HTML笔记（二）
qwq_666的博客
12-18 429
表单 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单form</title> </head> <body> <!-- 1.表单有什么用？ 收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器 2.如何画表单 使用form标签画表单 3.一个网页当中可以有多个表单
html表单
cjxs_的博客
10-07 400
html表单
web前端之表单（八）------表单
李海明的博客
03-30 788
1、最简单的表单 <!DOCTYPE html> <html> <head> <title>biaodan1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my pag
html表单知识
x0572_的博客
07-25 278
表单元素 表单元素标注 表单属性
web前端-HTML-表单
jinchenpeng的博客
05-26 236
例子：文本框和密码框 例子：单选框 例子:复选框 例子：文件上传 例子：按钮
Java全栈学习路线及知识清单
11-21
Java全栈学习路线及知识清单 Java全栈学习路线是指从Java基础到JavaWeb、JavaEE、Linux运维、分布式与微服务、大数据开发的完整学习路线。下面是Java全栈学习路线的详细知识点： 一、Java基础 Java基础知识是Java...
基于Java、Vue、TypeScript、HTML、CSS、JavaScript的Java全栈学习资源分享
最新发布
10-01
本项目为Java全栈开发学习资源集，涵盖Java、Vue、TypeScript、HTML、CSS、JavaScript等多种语言，包含364个文件，具体包括92个Java文件、67个Vue文件、38个PNG图片文件、35个TypeScript文件、26个JSON文件、21个...
Java全栈课程之HTML详解
01-25
HTML，全称HyperText Markup Language...在Java全栈课程中，HTML的学习不仅涉及基本语法，还包括与CSS、JavaScript的结合，以及在Java Web项目中的实际运用。通过实践，你可以创建出功能丰富、交互性强的网页应用程序。
FSD_Java:Java全栈开发
04-03
以上就是Java全栈开发所涉及的主要知识点，通过深入学习和实践，开发者可以构建完整的前后端解决方案，满足企业级应用的需求。在【FSD_Java-main】这个压缩包文件中，可能包含了相关的项目源码、教程资料或者练习...
form表单_WEB前端，form表单
weixin_39621044的博客
11-29 170
什么是表单？表单是一个包含表单元素的区域,表单元素是允许用户在表单中(比如：文本域、下拉列表、单选框、复选框等等)输入信息的元素。使用form标签定义1234"Url" method="get"> 用户名:"text" name="username" /> 密码:"text" name="password" />inputinput标签的类型有很多种...
web表单
m0_59492605的博客
12-02 1759
适用于初学web者
web前端—列表和表单
zhouzhi159的博客
12-22 3181
定义列表<dl> <dt>咖啡</dt> <dd>黑色热饮料</dd> <dt></dt> <dd></dd> </dl>无序列表<ul type=> <li> <li> </ul><ol> <li><li> </ol>表单<form action="表单提交地址" method="提交方法"> 表单元素 </form>action为空，向当前页面提交 get提交参数在地址栏可见，post不显示，
【web前端(一)】html_表单
LED_of_Java的博客
08-05 367
1. { { /*全都是以键值对的行是表现*/ 【给客户端加，给请求头封装】 { CET （子目录）/（根目录） HTTP（协议）/（路径）1.1 (请求内容：请求方 法） Host:www.sina.com (主机名) } 以上为请求头！ User-Agent:insomnia/6.5.4 (代理) Accept:*/* (接受所有页面请求) } 以上为...
web前端技术——三、表单
qq_46007633的博客
03-23 4281
表单概述与表单标签 input表单域 多行文本框和列表选择框 按钮与表单分组
Web前端之表格
花&败
10-29 6104
同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格在table中使用tr表示表格中的一行，有几个tr就有几行在tr中使用td表示一个单元格，有几个td就有几个单元格rowspancolspan。
【Web前端】表单
wosixiaokeai的博客
05-08 893
method：表单提交到服务器的方法，主要用到。action：表单提交的服务器处理的。2.3.3.3 datalist标签。2.3.3.1 label标签。2.2 GET和POST方法。2.3.3.4 文本区域标签。2.3.1 input标签。2.3.2 input属性。2.3.3.5 域容器标签。2.3.3.2 下拉列表。2.1 form表签。2.3.3 其他标签。
web前端表单（重点）
qq_34579198的博客
07-21 452
src属性：指路径 alt属性：当图片不能加载是的说明文字 audio标签：音频标签 video:视频标签 controls属性：音乐的控制台 autoplay属性：自动播放音乐 autoplay="autoplay" --> 无序列表； ul标签和li标签联合使用 ul中不能放其他的标签只能放li标签 li标签中可以再次嵌套ul标签 style=“li
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值