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>
总结
本篇文章就到这里了，希望能给你带来帮助，也希望您能够多多关注我们的更多内容！
相关推荐
-
PHP使用HTML5 FormData对象提交表单操作示例
本文实例讲述了PHP使用HTML5 FormData对象提交表单操作.分享给大家供大家参考,具体如下: 这是HTML5中新增的一个Api,他能以表单对象作为参数,自动的把表单的数据打包,当ajax发送数据时,发送这个FormData对象,以达到发送表单数据的目的. 创建: 参数是一个form节点对象 var fm = document.getElementById('formid'); var fd = new FormData(fm); 优点: (1)在以往的ajax做post请求时,当提交的
-
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
-
Asp.net webForm设置允许表单提交Html的方法
1.在表单需要提交Html的页面头部加入 ValidateRequest="false" <%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" %> 2.webConfig 的 <system.web> 节点下配置 <httpRuntime requestValidationMode="2.0&qu
-
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&g
-
HTML form表单提交方法案例详解
form表单提交方式总结一下: 一.利用submit按钮实现提交,当点击submit按钮时,触发onclick事件,由JavaScript里函数判断输入内容是否为空,如果为空,返回false, 不提交,如果不为空,提交到由action指定的地址. <script type="text/javascript"> function check(form) { if(form.userId.value=='') { alert("请输入用户帐号!"); for
-
SpringSecurity自定义Form表单使用方法讲解
目录 背景 实验-HttpBasic 实验-自定义登录页面 实验-自定义登录接口 实验-自定义登录数据参数 实验-自定义登录失败.成功处理器 实验-自定义登录成功跳转页面 实验-自定义退出接口 背景 本系列教程,是作为团队内部的培训资料准备的.主要以实验的方式来体验SpringSecurity的各项Feature. 新建一个SpringBoot项目,起名springboot-security-form,核心依赖为Web,SpringSecurity与Thymeleaf. <dependencie
-
jQuery Validate表单验证入门学习
本文讲述了jQuery Validate表单验证入门的基础知识,jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求,以下就是本文的全部内容,特分享给大家. 1.导入 js 库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/j
-
jquery validate.js表单验证入门实例（附源码）
小编上网查阅了许多关于jquery.validate的文章,大部门只是介绍它的api和用法,没有一个详细的的入门案例介绍,研究了半天还是无从下手.为此,小编自己做了一个jquery validate.js表单验证入门实例,写的不是特别好,但应该适用于初学者,分享给大家. 以下是validate.js表单验证入门实例参考源码,文章下面有源码下载地址: <html> <head> <meta http-equiv="Content-Type" content=
-
详解Angular Reactive Form 表单验证
本文我们将介绍 Reactive Form 表单验证的相关知识,具体内容如下: 使用内建的验证规则 动态调整验证规则 自定义验证器 自定义验证器 (支持参数) 跨字段验证 基础知识 内建验证规则 Angular 提供了一些内建的 validators,我们可以在 Template-Driven 或 Reactive 表单中使用它们. 目前 Angular 支持的内建 validators 如下: required - 设置表单控件值是非空的. email - 设置表单控件值的格式是 email.
-
基于javascript的Form表单验证
Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>form-lpb</title> <style> body { back
-
使用Ajax方法实现Form表单的提交及注意事项
写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,通过js来操作页面的跳转或者数据变化. 一般这种异步的操作,我们都会想到ajax方式,因此在实现了功能后就整理了这篇文章,通过ajax方法实现form表单的提交并进行后续的异步操作. 常见的form表单提交方式 <!DOCTYPE HTML PUBLIC "-//W3C/
-
ASP.NET中Form表单不可以嵌套使用
我非常确定在ASP 中是可以有多个form 表单的,以前常常这样干的,在后台分类管理页面中,把添加和修改放在同一个页面,这样就需要用到两个 form 表单进行提交服务器代码处理. 经过测试,在ASP.NET 也是可以一个页面有多个form 表单的,例如下面的代码: <form id="form1"></form><form id="form2"></form><form id="form3"&
-
bootstrap中的 form表单属性role="form"的作用详解
html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性. role的作用是描述一个非标准的tag的实际作用.比如用div做button,那么设置div 的 role="button",辅助工具就可以认出这实际上是个button 比如, <div role="checkbox" aria-checked="c