Javaweb基础入门HTML之table与form

2024-09-30 14:57:37

前章知识

：点此跳转

HTML简介：

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便

本节用到的单词意思：

border：边框、边界。
cellspacing:单元格间距、细胞间距
spacing:覆盖
submit：提交
button：按钮
font：字体
action：行动
checked：选中的
option：选项
textarea：文本区

table的相关用法

表格 table

行 tr

列 td

表头列：th

<table border="1" witdth="5" cellspacing="2.5" cellpadding="20">
			<tr align="center" ><!--这表示行-->
				<!--border="1" witdth="5" cellspacing="2.5" cellpadding="10"
				已经被淘汰-->
				<th>姓名</th><!--这表示列-->
				<th>班级</th>
				<th>学号</th>
			</tr>
			<tr><!--这表示行-->
				<td>笑霸fianl</td>
				<td>4班</td>
				<td>001</td>
			</tr>
			<tr><!--这表示行-->
				<td>钟钟</td>
				<td>4班</td>
				<td>002</td>
			</tr>
			<tr><!--这表示行-->
				<td>刀刀</td>
				<td>4班</td>
				<td>003</td>
			</tr>
			<tr><!--这表示行-->
				<td>茂茂</td>
				<td>4班</td>
				<td>001</td>
			</tr>
		</table>

表格 table有如下属性：
border:表格边框的粗细
width:宽度
cellspacing:表格间距

cellpadding:表格填充

行 tr有如下属性：
center(中),left(左默认),right(右)

位置发生了变化。

form的相关用法

定义和用法

标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。

输入元素

文本域（Text Fields）

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

 <form>
昵称：<input type="text" name="usr" value="请输入你的昵称"/><br />
</form>

浏览器显示如下：

注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

密码字段

密码字段通过标签<input type="password"> 来定义:

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

浏览器显示效果如下:

注意:密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮（Radio Buttons）

<input type="radio">标签定义了表单单选框选项

<form>
性别：<input type="radio" name="iox" value="male" checked="checked"/>男
        		  <input type="radio" name="iox" value="female" />女
        		  <input type="radio" name="iox" value="both"/>双性<br />
        		  <!-- checked="checked"就是默认选择 可以省略为checked
        		  <input type="radio" name="iox" value="male" checked/>男
-->
</form>

浏览器显示效果如下:

复选框（Checkboxes） <input type="checkbox">定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
爱好：<input type="checkbox" name="like" value="bsk" checked/>篮球
        		  <input type="checkbox" name="like" value="pp" checked/>乒乓球
        		  <input type="checkbox" name="like" value="fdb"/>足球
</form>

浏览器显示效果如下:

提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

浏览器显示效果如下:

textarea：多行文本框

注意：

<textarea name="beizhu" rows="4" cols="50"></textarea>
<textarea name="beizhu" rows="4" cols="50">这里不要轻易打回车 不然会有默认的value值
</textarea>

	备注：<br /><textarea name="beizhu" rows="4" cols="50"></textarea><br />
      		<input type="submit" value="注册" />
        	<input type="reset" value="重置" />

综合代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单学习</title>
		<!--
        	表单 form
        -->

        <form style="border:1px solid darkorchid" action="02表单02.html"  >
        	昵称：<input type="text" name="usr" value="请输入你的昵称"/><br />
        	密码：<input type="password"	 name="pwd"/><br />
        	性别：<input type="radio" name="iox" value="male" checked="checked"/>男
        		  <input type="radio" name="iox" value="female" checked/>女
        		  <input type="radio" name="iox" value="both"/>双性<br />
        	爱好：<input type="checkbox" name="like" value="bsk" checked/>篮球
        		  <input type="checkbox" name="like" value="pp" checked/>乒乓球
        		  <input type="checkbox" name="like" value="fdb"/>足球
        	<br />
        	生肖：<select>
        		<option>鼠</option><option>牛</option><option>虎</option><option>兔</option>
        		<option selected value="5">龙</option><option>蛇</option><option>马</option><option>羊</option>
        		<option>猴</option><option>鸡</option><option>狗</option><option>猪</option>
        	</select><br />

        	备注：<br /><textarea name="beizhu" rows="4" cols="50"></textarea><br />
      		<input type="submit" value="注册" />
        	<input type="reset" value="重置" />

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

效果如下：

到此这篇关于Javaweb基础入门HTML之table与form的文章就介绍到这了,更多相关Javaweb table内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

javaWeb使用servlet搭建服务器入门

百度百科说法: Servlet(Server Applet)是Java Servlet的简称,称为小服务程序或服务连接器,用Java编写的服务器端程序,主要功能在于交互式地浏览和修改数据,生成动态Web内容. 通俗讲法: 是运行在服务器端的一小段Java程序,接受和响应从客户端发送的请求作用: 处理客户端请求,并且对请求做出响应编写一个serclet步骤 1.编写一个类继承自HttpServlet 重写doGet和doPost方法 2.编写配置文件(web.xml) 先注册后绑定 3.访问
JavaWeb入门:ServletContext详解和应用

目录 1.获取web 程序启动时初始化参数 2.实现多个Servlet 对象共享数据测试: 3.读取web应用下的资源 4.请求转发总结当Servlet 容器启动的时候会为每个web应用创建一个ServletContext 对象代表当前的web应用. 在web.xml 文件中不止可以配置Servlet的初始化信息还可以给整个web应用配置初始化信息. 1.获取web 程序启动时初始化参数 web.xml 设置需要初始化的参数  <c
JavaWeb入门:HttpResponse和HttpRequest详解

目录 HttpResponse 讲解 HttpServletResponse概述: Response运行流程设置响应行设置响应头一个小demo 实现刷新页面累加设置字符编码解决中文乱码问题重定向 redirect request转发重定向和转发的区别文件下载 HttpRequest 讲解 HttpServletRequest概述 Request 运行流程获取请求携带的参数获取多个参数的值获得请求行的信息 request实现转发 request是一个域对象 ServletC
JavaWeb 入门篇:创建Web项目,Idea配置tomcat

目录创建一个maven项目项目结构添加框架在pom.xml 中添加如下依赖配置tomcat 添加完如下图: 解决导入包问题: 启动测试: 总结创建一个maven项目项目结构添加框架在pom.xml 中添加如下依赖 dependencies> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <versi
JavaWeb 入门:Hello Servlet

目录 Servlet 概述 Hello Servlet 总结 Servlet 概述 serlvet sun公司开发动态web 的一门技术. Servlet(Server Applet)是Java Servlet的简称,称为小服务程序或服务连接器,用Java编写的服务器端程序,具有独立于平台和协议的特性,主要功能在于交互式地浏览和生成数据,生成动态Web内容. 广义的Servlet是指任何实现了这个Servlet接口的类,.Servlet运行于支持Java的应用服务器中.从原理上讲,Servle
JavaWeb入门教程之分页查询功能的简单实现

一.MySql实现分页查询的SQL语句 1.分页需求: 客户端通过传递pageNo(页码),counter(每页显示的条数)两个参数去分页查询数据库表中的数据,那我们知道MySql数据库提供了分页的函数limit m,n,但是该函数的用法和我们的需求不一样,所以就需要我们根据实际情况去改写适合我们自己的分页语句,具体的分析如下: 比如: 查询第1条到第10条的数据的sql是:select * from table limit 0,10; ->对应我们的需求就是查询第一页的数据:select
JavaWeb Spring开发入门深入学习

1 Spring基本特征 Spring是一个非常活跃的开源框架:它是一个基于Core来构架多层JavaEE系统的框架,它的主要目地是简化企业开发. Spring以一种非侵入式的方式来管理你的代码,Spring提倡"最少侵入",这也就意味着你可以适当的时候安装或卸载Spring,Spring让java亮了. (开放–闭合原理),这里是闭原则. 2 开发spring所需要的工具 (这里先将spring2.5 ,后面3.0) 2.1 Spring的jar包到http://www.sprin
JavaWeb文件上传入门教程

一.文件上传原理 1.文件上传的前提: a.form表单的method必须是post b.form表单的enctype必须是multipart/form-data(决定了POST请求方式,请求正文的数据类型) c.form中提供input的type是file类型的文件上传域二.利用第三方组件实现文件上传 1.commons-fileupload组件: jar:commons-fileupload.jar commons-io.jar 2.核心类或接口 DiskFileItemFactory
Javaweb基础入门requse原理与使用

request对象是什么? Request对象的作用是与客户端交互,收集客户端的Form.Cookies.超链接,或者收集服务器端的环境变量.request对象是从客户端向服务器发出请求,包括用户提交的信息以及客户端的一些信息.客户端可通过HTML表单或在网页地址后面提供参数的方法提交数据,然后服务器通过request对象的相关方法来获取这些数据.request的各种方法主要用来处理客户端浏览器提交的请求中的各项参数和选项. requse接收表单请求数据: Request对象接收表单请求参数 a
Javaweb基础入门HTML之table与form

目录前章知识 HTML简介: 本节用到的单词意思: table的相关用法 form的相关用法输入元素文本域(TextFields) 密码字段单选按钮(RadioButtons) 提交按钮(SubmitButton) textarea:多行文本框综合代码前章知识 : 点此跳转 HTML简介: 超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字.图表与其他信息媒体相关联.这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件.这种组织
Bootstrap零基础入门教程(三)

什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 写到这里,这篇从零开始学Bootstrap(3)我想写以下几个内容: 1. 基于我对Bootstrap的理解,做一个小小的总结.
Bootstrap零基础入门教程(二)

什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 本文重点给大家介绍Bootstrap零基础入门教程(二),具体详情如下所示: 过程中会频繁查阅资料的网站: http://www.
MySQL数据库基础入门之常用命令小结

本文实例讲述了MySQL数据库基础入门之常用命令.分享给大家供大家参考,具体如下: 接上一篇:MySQL数据库主从同步实战过程 mysql命令介绍 mysql 是数据库管理命令通过mysql --help来查看相关参数及使用说明 mysql --help #mysql数据库管理命令 Usage: mysql [OPTIONS] [database] #语法格式 --help #查看帮助文档 --auto-rehash #自动补全功能 -A, --no-auto-rehash #不需自动补全 -
Django零基础入门之调用漂亮的HTML前端页面

引言: Django如何调用HTML前端页面呢? Django怎样去调用漂亮的HTML前端页面呢? 就直接使用render方法即可! render方法是django封装好用来调用HTML前端模板的方法! 1.模板放在哪? 在主目录下创建一个templates目录用来存放所有的html的模板文件.(如果是使用pycharm创建django项目的话,默认就会自动创建这个目录哦!但是用命令创建django项目的话是没有此目录的!) templates目录里面再新建各个以app名字命名的目录来存放
MySQL基础入门教程之事务

目录引言 1.事务操作 1.1 未控制事务 1.2 控制事务一 1.3 控制事务二 2.事务的四大特性 3.并发事务问题 4.事务隔离级别总结引言事务是一组操作的集合,它是一个不可分割的工作单位,事务会把所有的操作作为一个整体一起向系统提交或撤销操作请求,即这些操作要么同时成功,要么同时失败. 就比如: 张三给李四转账1000块钱,张三银行账户的钱减少1000,而李四银行账户的钱要增加1000. 这一组操作就必须在一个事务的范围内,要么都成功,要么都失败. 正常情况: 转账这个操作, 需
MySQL基础入门之Case语句用法实例

目录引言 CASE 的语法 CASE 语句在 MySQL 中是如何工作的? 带有 SELECT 和 ORDER BY 子句的 CASE 语句具有聚合函数的 CASE 语句补充:case行转列用法总结引言 MySQL CASE 是一个 MySQL 语句查询关键字,它定义了处理循环概念以执行条件集并使用 IF ELSE 返回匹配案例的方式. MySQL 中的 CASE 是一种控制语句,它验证条件案例集,并在第一个案例满足 else 值时显示值并退出循环. 如果没有找到 TRUE 且语句没有
JavaScript_object基础入门(必看篇)

之前写Java时老是有点蒙,大部分都是用jQuery,但原理还不是很清楚,最近一段时间在系统的学习JavaScript,有什么问题或错误请指出,多谢..................... Object所有类的基础类 var obj = new Object(); var obj = {}; //实例化对象给对象设置属性分为两种: 1.使用直接量的方式:对象.属性/方法,这种方式直观.易懂 obj.name = '张三'; obj.age = 20; obj.sex = '男'; obj.s
JavaWeb基础教程之Java基础加强版

1.myeclipse的安装和使用 * eclipse:是一个免费的开发工具 * myeclipse:是一个收费的插件,破解myeclipse, ** 安装目录的要求: 不能有中文和空格 ** 安装完成之后,选择一个工作空间 ,这个工作空间不能有中文和空格 * 破解myeclipse ** 运行run.bat文件,但是运行之前,必须要安装jdk,通过配置环境变量 * myeclipse的使用 * 创建一个工程 - 类型 java project web project - 选择依赖的jdk,可以