扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >html form表单基础入门案例讲解
  • 348

0
分享到

html form表单基础入门案例讲解

2024-04-02 19:04:59 348人浏览 薄情痞子
摘要

目录一，表格标签–1，概述–2，总结二，表单标签–1，测试–2，总结–3，fORM提交数据三，form表单的练习四，CSS-1，概述-2，语法-3，入门案例五，选择器总结一，表格标签

一，表格标签

向网页中加入表格

–1，概述


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 表格标签</title>
	</head>
	<body>
		<!-- 展示一个3行3列的表格 -->
<!-- table是表格标签，bGColor设置背景色 width是表格的宽度 border是表格的边框 cellspacing是单个元的间距  -->
		<table bgcolor="pink" width="300px" border="1px" cellspacing="0">
			<tr> <!-- tr是表里的行 -->
				<td colspan="2">11</td> <!-- colspan合并列 -->
				<td>13</td><!-- td是行里的列 -->
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td rowspan="2">23</td>  <!-- colspan合并行-->
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
			</tr>
		</table>
	</body>
</html>

–2，总结

table 标签用来表示表格

tr 标签表示表里的一行

td 标签表示行里的列

border 设置边框

cellspacing 设置单元格的间距

bgcolor 设置背景色

width 设置宽度

height 设置高度

colspan 合并列

rowspan 合并行

二，表单标签

用来提交数据，本质上就是在一个表格标签的外面用form包起来

在这里插入图片描述

–1，测试


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 表单标签</title>
	</head>
	<body>
		<form>
			<table border="1px" bgcolor="lightgrey" bordercolor="red" cellspacing="0">
				<tr>
					<td colspan="2">
						<h1 align="center">注册表单</h1>
					</td>
				</tr>
				<tr>
					<td>用户名：</td>
					<td>
						<input type="text" />
					</td>
				</tr>
				<tr>
					<td>密码：</td>
					<td>
						<input type="passWord" />
					</td>
				</tr>
				<tr>
					<td>确认密码：</td>
					<td>
						<input type="password" />
					</td>
				</tr>
				<tr>
					<td>昵称：</td>
					<td>
						<input type="text" />
					</td>
				</tr>
				<tr>
					<td>邮箱：</td>
					<td>
						<input type="email" />
					</td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
						<input type="radio" />男
						<input type="radio" />女
					</td>
				</tr>
				<tr>
					<td>爱好：</td>
					<td>
						<input type="checkbox" />篮球
						<input type="checkbox" />足球
						<input type="checkbox" />乒球
					</td>
				</tr>
				<tr>
					<td>城市：</td>
					<td>
						<select>
							<option>北京</option>
							<option>上海</option>
							<option>山东</option>
							<option>东北</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>头像：</td>
					<td>
						<input type="file" />
					</td>
				</tr>
				<tr>
					<td>验证码：</td>
					<td>
						<input type="text" />
						<img src="a.png">
						<input type="button" value="点我换一张" />
					</td>
				</tr>
				<tr>
					<td>自我描述：</td>
					<td>
						<textarea>请输入自我描述~~</textarea>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit" value="提交"/>
						<input type="button" value="重置"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

–2，总结

form标签用来提交表单里的数据

table标签用来实现表格

tr标签用来表示表格里的行

td标签表示行里的列

img标签表示插入图片

select标签表示下拉框，option是下拉选项

textarea标签是文本域

input表示输入框，类型很丰富

text类型是普通的文本输入框

password是密码输入框

email是邮箱的输入框

file是上传文件

radio是单选框

checkbox是多选框

button是普通的按钮

submit是提交按钮，比button多了数据提交的功能

align属性用来设置元素的位置center是居中

bordercolor设置边框的颜色

–3，form提交数据

–1，提交按钮必须submit类型，不然不会提交数据的

–2，哪些数据需要提交的话，必须在网页上配置name属性

–3，提交的数据都在地址栏中展示 Http://127.0.0.1:8848/cgb2105/html4.html?username=1314

username=1314 ，其中username是页面中name属性的值，1314是网页中输入的数据


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 表单标签</title>
	</head>
	<body>
		<!-- 默认会把数据在地址栏中拼接，，，，，GET方式提交数据 
			http://127.0.0.1:8848/cgb2105/html4.html?username=1&pwd=2&repwd=2
			GET方式提交数据：好处是展示的效果明确，坏处是不安全，地址栏太长
			POST方式提交数据：好处是安全对数据的大小没上线，坏处是看不见数据
		-->
		<form method="post" action="http://www.baidu.com">
			<table border="1px" bgcolor="lightgrey" bordercolor="red" cellspacing="0">
				<tr>
					<td colspan="2">
						<h1 align="center">注册表单</h1>
					</td>
				</tr>
				<tr>
					<td>用户名：</td>
					<td>
						<input type="text" name="username"/>
					</td>
				</tr>
				<tr>
					<td>密码：</td>
					<td>
						<input type="password" name="pwd"/>
					</td>
				</tr>
				<tr>
					<td>确认密码：</td>
					<td>
						<input type="password" name="repwd" />
					</td>
				</tr>
				<tr>
					<td>昵称：</td>
					<td>
						<input type="text"  name="nick"/>
					</td>
				</tr>
				<tr>
					<td>邮箱：</td>
					<td>
						<input type="email" name="mail" />
					</td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
						<!-- radio是单选，拥有相同的name值才能实现单选，不然就是双选了 
								必须设置value属性，否则永远提交on
						-->
						<input type="radio"  name="sex" value="1"/>男
						<input type="radio"  name="sex" value="0"/>女
					</td>
				</tr>
				<tr>
					<td>爱好：</td>
					<td>
						<!-- 拥有相同的name值，必须设置value属性否则提交的是on -->
						<input type="checkbox"  name="like" value="1"/>篮球
						<input type="checkbox"  name="like" value="2"/>足球
						<input type="checkbox"  name="like" value="3"/>乒乒球
					</td>
				</tr>
				<tr>
					<td>城市：</td>
					<td>
						<!-- 配置value属性，否则提交的是汉字，网络传输时字符串没有数字快 -->
						<select name="city">
							<option value="1">北京</option>
							<option value="2">上海</option>
							<option value="3">山东</option>
							<option value="4">东北</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>头像：</td>
					<td>
						<input type="file" name="head"/>
					</td>
				</tr>
				<tr>
					<td>验证码：</td>
					<td>
						<input type="text"  name="code" />
						<img src="a.png">
						<input type="button" value="点我换一张" />
					</td>
				</tr>
				<tr>
					<td>自我描述：</td>
					<td>
						<textarea>请输入自我描述~~</textarea>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit" value="提交"/>
						<input type="button" value="重置"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

三，form表单的练习

在这里插入图片描述


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习form表单</title>
	</head>
	<body>
		<!-- 默认的数据提交是get方式 -->
		<form>
			<table>
				<tr>
					<td>
						<h3>学生信息管理系统MIS</h3>
					</td>
				</tr>
				<tr>
					<td>
						姓名：
					</td>
				</tr>
				<tr>
					<td>
						<input type="text" placeholder="请输入姓名" name="user" />
					</td>
				</tr>
				<tr>
					<td>
						年龄：
					</td>
				</tr>
				<tr>
					<td>
						<input type="number" placeholder="请输入年龄" name="age" />
					</td>
				</tr>
				<tr>
					<td>
						性别：(单选框) 
						<input type="radio" name="sex" value="1"/>男
						<input type="radio" name="sex" value="0"/>女
					</td>
				</tr>
				<tr>
					<td>
						爱好：(多选) 
						<input type="checkbox" name="like" value="1"/>乒乓球
						<input type="checkbox" name="like" value="2"/>爬山 
						<input type="checkbox" name="like" value="3"/>唱歌
					</td>
				</tr>
				<tr>
					<td>
						学历：(下拉框) 
						<select name="edu">
							<option value="1">本科</option>
							<option value="2">专科</option>
							<option value="3">高中</option>
							<option value="4">小学</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>
						入学日期： <br/>
						<input type="date" name="time"/>
					</td>
				</tr>
				<tr>
					<td>
						<input type="submit" value="保存" />
						<input type="button" value="取消" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

四，CSS

-1，概述

用来修饰网页的，变得好看。层叠样式表stylesheet

-2，语法

td{ text-align : center; } 选择器{ 属性名 : 属性值 ; }

-3，入门案例


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 css修饰网页</title>
		<!-- css写法2：内部css，插入css代码 -->
		<style>
			
			
			div{
				color:green; 
				background-color: #008000;
			}
		</style>
	</head>
	<body>
		<!-- css写法1：行内css-->
		<div style="color: red;">我是div1</div>
		<div style="background-color: aquamarine;" >我是div2</div> 
		<div style="color: red;">我是div3</div>
		<div>我是div4</div>
		<div>我是div5</div>
	</body>
</html>

五，选择器


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 css的选择器</title>
		<!-- style向HTML中嵌入css代码 -->
		<style>
			
				 
				 div{  
					background-color: #008000; 
					color: black; 
					font-size: 30px ; 
					font-family: "宋体" ; 
				}
				
				input{
					background-color: pink; 
				}
			
				.a{ 
					color: yellow;
				}
				
				#x{ 
					font-size: 100px; 
				}
		</style>
	</head>
	<body>
		<!-- div span p input  -->
		<div class="a">我是div1</div>
		<div id="x">我是div2</div>
		<div id="y">我是div3</div>
		<span class="a">我是span1</span>
		<span>我是span2</span>
		<p class="a">我是p</p>
		<input type="text" placeholder="我是input1"></input>
		<input type="text" placeholder="我是input2"></input>
	</body>
</html>

总结

本篇文章就到这里了，希望能给你带来帮助，也希望您能够多多关注编程网的更多内容！

--结束END--

本文标题: html form表单基础入门案例讲解

本文链接: https://lsjlt.com/news/130317.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • html form表单基础入门案例讲解
    目录一，表格标签–1，概述–2，总结二，表单标签–1，测试–2，总结–3，form提交数据三，form表单的练习四，CSS-1，概述-2，语法-3，入门案例五，选择器总结一，表格标签...
    99+
    2024-04-02
  • Javaweb基础入门HTML之table与form
    目录前章知识HTML简介：本节用到的单词意思：table的相关用法form的相关用法输入元素文本域（TextFields）密码字段单选按钮（RadioButtons）提交按钮(Sub...
    99+
    2024-04-02
  • HTML form表单提交方法案例详解
    form表单提交方式总结一下： 一、利用submit按钮实现提交，当点击submit按钮时，触发onclick事件，由JavaScript里函数判断输入内容是否为空，如果为空，返回f...
    99+
    2024-04-02
  • 基于SpringMVC入门案例及讲解
    目录一、SpringMvc概述二、入门案例 开发步骤1、创建web工程、引入依赖2、配置SpringMvc入口文件3、创建Springmvc.xml文件4、创建 业务处理器...
    99+
    2024-04-02
  • Java SQL注入案例教程及html基础入门
    目录一，SQL注入–1，需求–2，测试–3，总结二，练习PreparedStatement–1，需求–2，测试–3,制作工具类三，HTML–1,概述–2,入门案例–3,使用工具–4，...
    99+
    2024-04-02
  • springboot与springmvc基础入门讲解
    目录一，SpringBoot–1,概述–2,用法二，SpringMVC–1，概述–2，原理–3，入门案例总结一，SpringBoot –1,概述 用来整合maven项目，可以和Sp...
    99+
    2024-04-02
  • C++入门之模板基础讲解
    目录前言引入模板函数模板模板的匹配原则模板的显示调用类模板注意1注意2总结 前言 今天博主将要介绍的内容是–模板,他在C++中具有非常重要的位置.至于什么是模板呢?我们请看...
    99+
    2024-04-02
  • MyBatis框架零基础快速入门案例详解
    目录一、创建数据库和表二、创建maven工程三、代码编写1、编写Student实体类2、编写DAO接口StudentDao3、编写DAO接口Mapper映射文件StudentDao....
    99+
    2024-04-02
  • Scrapy简单入门及实例讲解
    Scrapy是一个为了爬取网站数据，提取结构性数据而编写的应用框架。 其可以应用在数据挖掘，信息处理或存储历史数据等一系列的程序中。其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的， 也可以应用在获取API所返回的数据(例如 A...
    99+
    2023-01-31
    实例 入门 简单
  • C++基础入门篇之强制转换讲解
    本篇内容主要讲解“C++基础入门篇之强制转换讲解”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“C++基础入门篇之强制转换讲解”吧!引言假设有基类 A，包含了虚函数 func1，以及有派生类 B，...
    99+
    2023-06-07
  • JavaScript基础学习：全面讲解，轻松入门
    JavaScript是什么？ JavaScript是一种脚本语言，它与HTML和CSS一起构成了Web的三大基石。它可以用来创建交互式网页，例如动画、游戏和表单。JavaScript也是一种通用的编程语言，这意味着它可以在各种平台上运行...
    99+
    2024-02-08
    JavaScript 基础 教程 学习 入门 演示代码
  • MyBatis框架零基础快速入门案例分析
    这篇文章主要讲解了“MyBatis框架零基础快速入门案例分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“MyBatis框架零基础快速入门案例分析”吧！一、创建数据库和表数据库名ssm，数据...
    99+
    2023-06-29
  • springboot基础篇（快速入门 + 完整项目案例）
    目录 1.springboot简介2.REST风格1.简介2.RESTful 3.复制工程4.属性配置1.application.properties2.application.yml、....
    99+
    2023-09-04
    spring boot restful java
  • 【JavaScript】讲解JavaScript的基础知识并且配有案例讲解
    🎊专栏【 前端易错合集】 🍔喜欢的诗句：更喜岷山千里雪 三军过后尽开颜。 🎆音乐分享【如愿】 大一同学小吉，欢迎并且感谢大家指出我的问题🥰 目录   Ἰ...
    99+
    2023-09-04
    javascript 开发语言 ecmascript
  • Java使用elasticsearch基础API使用案例讲解
    1.依赖 我用的是 springboot 2.2.5.RELEASE 版本，这里只贴出主要依赖： <dependency> <groupId>o...
    99+
    2024-04-02
  • Go语言入门13之runtime包案例讲解
    目录Runtime包GOMAXPROCS()Gosched()Goexit()举个栗子Runtime包 GOMAXPROCS() ​ 用来设置可以并行计算的CPU核数最大值，并返回之...
    99+
    2023-05-18
    Go runtime包 Go runtime
  • Java注解的简单入门小案例
    目录快速了解注解Talk is cheap, show me the code.定义注解定义类处理注解类测试测试结果快速了解注解 我发现现在很多资料讲的都太过于详细了，但是我们可能仅...
    99+
    2023-05-14
    Java注解 注解简单 Java注解入门
  • Java之单链表问题解决案例讲解
    单链表 单链表是一种链式存取的数据结构,用一组地址任意的存储单元存放线性表中的数据元素。 链表中的数据是以结点来表示的，每个结点的构成:元素(数据元素的映象) + 指针(指示后继元素...
    99+
    2024-04-02
  • Java正则表达式入门基础的示例分析
    这篇文章主要为大家展示了“Java正则表达式入门基础的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Java正则表达式入门基础的示例分析”这篇文章吧。正则表达式是一种文本模式，包括普通字...
    99+
    2023-05-30
  • spring boot集成redis基础入门实例详解
    目录Redisredis和spring bootspring boot集成redisredis使用redis在spring boot中存取数据set写入数据get读取数据模拟接口请求读取redis中的数据总结redis ...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作