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

目录
  • 一,表格标签
    • –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 */
			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>
			/* 1. 标签名选择器: */
				 /* 练习1:选中标签名叫div的所有元素*/
				 div{
					background-color: #008000; /* 设置背景色 */
					color: black; /* 设置字的颜色*/
					font-size: 30px ; /* 设置字号 */
					font-family: "宋体" ; /* 设置字体 */
				}
				/* 练习2:选中标签名叫input的所有元素*/
				input{
					background-color: pink; /* 设置背景色 */
				}
			/* 2. class选择器:先设置class属性 + 通过.获取class的值 */
				.a{ /* 选中网页中所有class=a的元素们,其中class的值可以重复*/
					color: yellow;/* 字的颜色 */
				}
			/* 3. id选择器:先设置id属性 + 通过#获取id的值 */
				#x{ /* 选中网页中id=x的元素,由于id的值不能相同,所以只选中了一个元素*/
					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>

总结

本篇文章就到这里了,希望能给你带来帮助,也希望您能够多多关注我们的更多内容!

时间: 2021-07-11

Asp.net webForm设置允许表单提交Html的方法

1.在表单需要提交Html的页面头部加入  ValidateRequest="false" <%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" %> 2.webConfig 的  <system.web> 节点下配置 <httpRuntime requestValidationMode="2.0&qu

form表单action提交的js部分与html部分

1.JS部分代码 复制代码 代码如下: /** * 提交表单 */ function submitForm(action, actName, objName, formName,blogType){ $("#"+formName).attr("action",action); //var f = document.getElementsByTagName("form")[0]; //alert(f.action); $("#"

php+html5使用FormData对象提交表单及上传图片的方法

本文实例讲述了php+html5使用FormData对象提交表单及上传图片的方法.分享给大家供大家参考.具体分析如下: FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台.在使用Ajax提交时,使用FormData对象可以减少拼接queryString的工作量. 使用FormData对象 1.创建一个FormData空对象,然后使用append方法添加key/value 复制代码 代码如下: var formdata = new

HTML的form表单和django的form表单

django的表单系统,分2种 基于django.forms.Form的所有表单类的父类 基于django.forms.ModelForm,可以和模型类绑定的Form 直接用原生的form表单,也可以直接用,较麻烦, django的form表单,也可用可不要, 在views里创建一个类,继承了forms.Form ,每个字段就是一个输入框, #----- #django 的form表单 from django import forms class MyForm(forms.Form): #for

PHP使用HTML5 FormData对象提交表单操作示例

本文实例讲述了PHP使用HTML5 FormData对象提交表单操作.分享给大家供大家参考,具体如下: 这是HTML5中新增的一个Api,他能以表单对象作为参数,自动的把表单的数据打包,当ajax发送数据时,发送这个FormData对象,以达到发送表单数据的目的. 创建: 参数是一个form节点对象 var fm = document.getElementById('formid'); var fd = new FormData(fm); 优点: (1)在以往的ajax做post请求时,当提交的

thinkPHP5 ajax提交表单操作实例分析

本文实例讲述了thinkPHP5 ajax提交表单操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <

Jquery响应回车键直接提交表单操作代码

事情是这样的,做了一个登陆页面,把 Form 去了,直接拿 Jquery 的 Ajax 跟服务器交互,但是这样的话 浏览器就不会默认响应 回车键提交数据了.索性让 Jquery 也接管 回车键的响应吧: 复制代码 代码如下: $("#loginbox input[type='submit']").click(function() {     //Ajax 与服务器交互验证 }); $('#loginbox').keydown(function(e){     if(e.keyCode

php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】

本文实例讲述了php+js实现的拖动滑块验证码验证表单操作.分享给大家供大家参考,具体如下: 现在很多网站,比如淘宝,京东等都改用使用极验拖动验证码实现登录,这种方式比传统的验证码方式有更好的体验,减少用户输入的错误,也同样能起到防盗刷的功能.现在很多极验都是第三方的,也很多都是收费的.今天在这里给大家分享自己用原生php实现的一个极验的代码.用原生php的好处就是以后你要嵌套到什么框架,可以直接用核心代码,改一改就好了. 极验拖动动画图 代码文件截图 代码实现 html文件 <!DOCTYPE

了解JavaScript表单操作和表单域

一.表单的获取方式 1.document.getElementById() 2.document.forms[index]; 3.document.forms[form_name] 4.document.form_name function testGetForm() { var frm = document.getElementById("regForm"); // 常用 console.log(frm); frm = document.forms[0]; console.log(f

jQuery ajax中使用serialize()方法提交表单数据示例

jQuery ajax中数据以键值对(Key/Value)的形式发送到服务器,使用ajax提交表单数据时可以使用jQuery ajax的serialize() 方法表单序列化为键值对(key1=value1&key2=value2-)后提交.serialize() 方法使用标准的 URL-encoded 编码表示文本字符串.下面是使用serialize()序列化表单的实例: 复制代码 代码如下: $.ajax({   type: "POST",   url: ajaxCallU

yii框架表单模型使用及以数组形式提交表单数据示例

按Yii文档里的描述,Yii在处理表单的一般过程是: 创建表单对应的模型类,设置字段验证规则创建表单提交对应的action,处理提交的内容在视图中创建表单form在刚刚的一个小项目里,想使用ajax提交表单信息并验证保存,又不想用隐藏iframe来做无刷新提交,并且action中能够用到模型类的校验方法,就想到使用表单数组提交的方式,举个例子: form代码: 复制代码 代码如下: <form action='' method='post' name='form_test'>    <i

Django框架表单操作实例分析

本文实例讲述了Django框架表单操作.分享给大家供大家参考,具体如下: HTML表单是网站交互性的经典方式. 开始学习如何用Django对用户提交的表单数据进行处理. HTTP 请求 HTTP协议以"请求-回复"的方式工作.客户发送请求时,可以在请求中附加数据.服务器通过解析请求,就可以获得客户传来的数据,并根据URL来提供特定的服务. GET 方法 在之前的项目中创建一个 search.py 文件,用于接收用户的请求: /djangoPro/djangoPro/search.py

Java利用HttpClient模拟POST表单操作应用及注意事项

HttpClient使用post方法提交数据 源代码: 复制代码 代码如下: package post; import Java.io.IOException; import org.apache.commons.httpclient.Header; import org.apache.commons.httpclient.HttpClient; import org.apache.commons.httpclient.HttpException; import org.apache.commo