简单易懂!带你了解HTML5中的表单功能(form)
HTML5的表单(form)介绍
HTML 表单(form) 在网页中主要负责数据采集功能,利用表单可以实现与用户的交互,比如收集浏览者的信息或实现搜索等功能。
表单(form)标签格式:
<form 表单标签的属性>
表单元素
</form>
表单标签的属性
除了通用属性 id 、 style 、 class 外,还有:
action:规定当提交表单时,向何处发送表单数据。action取值为:第一,一个URL(绝对URL/相对URL),一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理。比如<form action="http://www.cnblogs.com/reg.ashx">,当用户提交这个表单时,服务器将执行网址"http://www.cnblogs.com/"上的名为"reg.ashx"的一般处理程序。第二,使用mailto协议的URL地址,这样会将表单内容以电子邮件的形式发送出去。这种情况比较少见的,因为它要求访问者的计算机上安装和正确设置好了邮件发送程序。第三,空值,如果action为空或不写,表示提交给当前页面。
method:该属性定义浏览器将表单中的数据提交给服务器处理程序的方式。关于method的取值,最常用的是get和post,如 method="post"。第一,使用get方式提交表单数据,Web浏览器会将各表单字段元素及其数据按照URL参数格式附在<form>标签的action属性所指定的URL地址后面发送给Web服务器;由于URL的长度限制,使用get方式传送的数据量一般限制在1KB以下。第二,使用post方式,浏览器会将表单数据作为HTTP请求体的一部分发送给服务器。一般来说,使用post方式传送的数据量要比get方式传递的数据量大;根据HTML标准,如果处理表单的服务器程序不会改变服务器上存储的数据,则应采用get方式(比如查询),如果表单处理的结果会引起服务器上存储的数据的变化,则应该采用post方式(比如增删改操作)。由于我对这些了解的不多,就不多言语了。
target:该属性规定在何处显示action属性中指定的URL所返回的结果。取值有_blank(在新窗口中打开)、_self(在相同的框架中打开,默认值)、_parent(在父框架中打开)、_top(在整个窗口中打开)和framename(在指定的框架中打开)。
title:设置网站访问者的鼠标放在表单上的任意位置停留时,浏览器用小浮标显示的文本。
enctype:规定在发送到服务器之前应该如何对表单数据进行编码。取值:默认值为 "application/x-www-form-urlencoded",在发送到服务器之前,所有字符都会进行编码(空格转换为 "+" 加号,特殊符号转换为 ASCII HEX 值);“multipart/form-data”:不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。
name:表单的名称。注意和id属性的区别:name属性是和服务器通信时使用的名称;而id属性是浏览器端使用的名称,该属性主要是为了方便客户端编程,而在css和javascript中使用的。
表单元素
表单元素(form elements),也称为表单控件(form controls):
单行文本框<input type="text" >
密码框<input type="password"/>
单选按钮<input type="radio" name=""/>
复选框<input type="checkbox"/>
隐藏域<input type="hidden"/>
文件上传<input type="file"/>
下拉框<select>标签
多行文本<textarea></textarea>
提交按钮<input type="submit"/>
普通按钮<input type="button"/>
重置按钮<input type="reset"/>
下面简要介绍几个表单元素的使用。
Input标签定义输入控件。语法:
<input type="input元素类型" name="input元素名称" value="textinput元素的值" />
Input标签属性 |
说明 |
type |
指定元素的类型。text(文本框)、password(密码框)、checkbox(复选框)、radio(单选按钮)、submit(提交按钮)、reset(重置按钮)、file(文件上传)、hidden(隐藏域)、image(图像形式的提交按钮) 和 button(按钮),还有:email(电子邮箱)、url(网址)、number(数字输入框,带微调按钮)、range(滑动条)、date(选取日期)、time(选取时间)、datetime(选取日期时间) |
name |
指定表单元素的名称 |
value |
元素的初始值。type 为 radio时必须指定一个值 |
size |
指定表单元素的初始宽度。当 type 为 text 或 password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位 |
maxlength |
type为text 或 password 时,输入的最大字符数 |
checked |
type为radio或checkbox时,指定按钮是否是被选中 |
select(列表框)
<select> 标签下拉列表
其中的 <option> 标签用于定义列表中的可用选项。例如:
<select name="contry">
<option value="none">--选择国家--</option>
<option value="usa">美国</option>
<option value="en">英国</option>
<option value="cn" selected="selected">中国</option>
</select>
textarea(多行文本域)
<textarea> 标签定义多行的文本输入。可以通过 cols 和 rows 属性来规定 textarea 的列数——宽度(字符数)和行数,不过更好的办法是使用 CSS 的 height 和 width 属性。
下面给出比较完整的示例
例1、下面给出一个简单的表单示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单示例</title>
</head>
<body>
<from>
输入名称:<input type="text" name="user" value=""/><br/>
输入密码:<input type="password" name="passwd" value=""/>
<br>
选择性别:<input type="radio" name="sex" vlaue="nan"/> 男 <input type="radio" name="sex" value="nv" checked="checked"/> 女
<br>
选择技术:
<input type="checkbox" name="tech" value="java"/>Java
<input type="checkbox" name="tech" value="html"/>html
<input type="checkbox" name="tech" value="css"/>CSS
<br>
选择文件:
<input type="file" name="file" />
<br>
一个按钮:<input type="button" value="有个按钮" onclick="alert('有个按钮')">
<br>
<select name="contry">
<option value="none">--选择国家--</option>
<option value="usa">美国</option>
<option value="en">英国</option>
<option value="cn" selected="selected">中国</option>
</select>
<br>
<textarea name="text">可以是多行文本</textarea>
<from>
</body>
</html>
保存文件名为:表单例1.html
运行效果如下图:
例2、结合CSS和JavaScript的表单示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单学生信息管理</title>
<!-- 样式 -->
<style>
table {
margin: auto;
width: 80%;
background-color: #d9ffdc;
/* 表格背景色 */
text-align: center;
border-collapse: collapse;
}
caption {
font-size: 28px;
line-height: 50px;
color: blue;
}
th {
background-color: #00a40c;
/* 表头背景色 */
color: #FFF;
/* 表头文字颜色 */
}
th,td {
border: 1px solid #00a40c; padding: 6px;
}
.btn {
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
width: 90px;
height: 36px;
border-radius: 6px;
background-color: forestgreen;
}
body {
text-align: center;
}
#add {
/*width:270px ;
height: 290px;*/
display: none;
position: absolute;
border: 1px solid darkgreen;
padding:5px 20px 20px 15px;
border-radius: 6px;
background-color: #d9ffdc;
text-align: right;
}
h3 {
text-align: left;
}
#close{
float: right;
color: lightcoral;
}
.text {
padding: 0 10px;
color: #777777;
font-weight: bold;
margin: 6px;
height: 30px;
}
</style>
</head>
<body>
<table id="cj">
<caption> 简单学生信息表</caption>
<tr>
<th>学号</th>
<th>姓名 </th>
<th>性别</th>
<th>住址</th>
<th>删除</th>
</tr>
</table>
<input type="button" value="增 加" id="addInfo" class="btn" />
<!--动态添加表单 -->
<div id="add">
<h3> 添加信息 <span title="关闭" id="close">Χ</span></h3>
<form name="addForm">
学号:<input name="id" class="text" /><br>
姓名:<input name="user" class="text" /><br>
性别:<input name="Gender" class="text" /><br>
住址:<input name="address" class="text" /><br>
<input type="button" value="确 定" id="qd" class="btn" />
<input type="reset" value="重 置" class="btn" />
</form>
</div>
<!-- JS -->
<script>
var tab = document.getElementById('cj');
//设置表格奇数行和偶数行背景颜色
function strRow() {
var len = tab.rows.length;
for(var i = 0; i < len; i++)
if(i % 2)
tab.rows[i].style.backgroundColor = "lightgreen"
else
tab.rows[i].style.backgroundColor = "#d9ffdc";
}
strRow();
//删除指定行
function del(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById('cj').deleteRow(i);
strRow();
}
var btQd = document.getElementById("qd");//通过id属性获取“确定”按钮。
var add = document.getElementById("add");//通过id属性获取“增加信息”对话框。
var btAdd = document.getElementById("addInfo");//通过id属性获取“增加”按钮。
btQd.onclick = function() {
insRow();
add.style.display = "none";
}
btAdd.onclick = function() {
add.style.display = "block";
show();
}
//不显示(隐藏)动态添加表单
document.getElementById("close").onclick = function() {
add.style.display = "none";
}
//插入新行数据
function insRow() {
rs = tab.insertRow(tab.rows.length);
var c0 = rs.insertCell(0);
var c1 = rs.insertCell(1);
var c2 = rs.insertCell(2);
var c3 = rs.insertCell(3);
var c4 = rs.insertCell(4);
c0.innerHTML = addForm.id.value; // 新增行的第1个单元格赋值
c1.innerHTML = addForm.user.value; // 新增行的第2个单元格赋值
c2.innerHTML = addForm.Gender.value; // 新增行的第3个单元格赋值
c3.innerHTML = addForm.address.value; // 新增行的第4个单元格赋值
c4.innerHTML = '<span onclick="del(this)">删除</span>'; //第5个单元格
strRow()// 隔行变色
}
//动态添加表单居中显示
function show() {
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var top = (h - 260) / 2;
var left = (w - 300) / 2;
add.style.top = top + 'px';
add.style.left = left + 'px';
}
window.onresize = function() {
show();
};
</script>
</body>
</html>
保存文件名为:表单例2.html
运行效果如下图:
网页前后端交互技术
前端通常会通过后端(后台)提供的接口来获取数据来完成前端页面的渲染。
对于一个站点,用户看得到的只是前端网站的一部分,网站的大多数情况是看不到的,这些看不到的就是后端。后端包括程序设计架构、数据库管理、处理相关的业务逻辑等。
web前端开发是在构建用户界面,相比前端开发,后端开发需要花更多的时间来实现算法和解决问题上。web后端开发跟sql数据库打交道比较多,也就是web后端开发就是从数据库或者其他数据源写入、读取、处理数据。还需要了解PHP、web框架、ASP.NET、WVC等,还有缓存技术(cookie、session、localstorage、cashe-controller等)。
本文不打算深入网页前后端交互技术,在此给出一个参考示例网址
https://www.cnblogs.com/nrm1/p/6146981.html
附录
HTML 标签参考手册 https://www.w3schools.cn/tags/
上一篇: Form表单
推荐阅读
-
简单易懂!带你了解HTML5中的表单功能(form)
-
简单易懂!带你了解机器学习中的优化函数详解
-
简单易懂!带你了解机器学习中的KNN算法
-
三分钟带你了解手机内部硬件-主要影响手机性能的有以下几点 CPU - *处理器(手机中的大脑) CPU 是计算思考以及处理事物的。 比如:我们日常玩手机,什么最重要?毫无疑问是手机打开软件很流畅,使用各种功能不卡。 这就是CPU的性能,那什么影响 CPU 的因素有哪些? 架构 架构是 CPU 的基础,对于处理器的整体性能起到了决定性的作用,不同架构的处理器同主频下,性能差距可以达到2-5倍。可见架构的重要性。 那么什么是架构呢? 打个比方,架构就是一栋楼的框架。至于最终楼什么样子,就由处理器的厂商决定了,但是有一点,如果说这栋楼房的结构设计出来容纳多少人,那么最后建好的房子也要在这个范围内。同理,如果使用相同架构的处理器,那么本质上不会有太大的区别。 看一下主流手机的架构 处理器对比.jpg 从上图可见:高通 和 苹果都是自主设计,所以说它们牛还是有一定的道理的。不同的架构, 性能和功耗也是不同的。架构决定了 主频、核心数、带宽等和运算量直接相关的东西。目前很多手机打广告都是说 多少核的机器。但是并不是说核越多性能就越强,你没看见,苹果双核就能吊打高通和联发科吗? 制程 制程 专指:事物运作程序的处理过程。常指手机芯片框架的运算速度量。 简单的说就是电路板中电路与电路之间的距离,目前已经发展到纳米级别。 制程越小,可以向芯片中塞入更多的晶体管,随之而来的好处还有:降低电量和成本、散热。 制程数的确定 这里有人要问,为什么制程的数字是这些,而不是别的数字,比如有28nm,为什么没有29nm? 这其实是有一定规律的。根据早期国际半导体蓝图规划,由五个在相关领域较为发达的国家共同制定,约定下一代制程要在上一代基础上做到晶体管数量不变,芯片面积缩小一半。由这一关系可以算出前一代制程要比后一代大√2倍,所以能算出后一代大概数值。纵观整个处理器制程变化,除了少部分特殊的外,都遵循着这一规则。 近代制程的发展 2014 年底,三星宣布了世界首个 14nm FinFET 3D 晶体管进入量产,标志着半导体晶体管进入 3D 时代。发展到今天,三星拥有了四代 14nm 工艺,第一代是苹果 A9 上面的 FinFET LPE(Low Power Early),第二代则是用在猎户座 骁龙 820 和骁龙 625 上面的 FinFET LPP(Low Power Plus)。第三代是 FinFET LPC,第四代则是目前的 FinFET LPU。至于 10nm 工艺,三星则更新到了第三代(LPE/LPP/LPC)。 目前为止,三星已经将 70000 多颗第一代 LPE(低功耗早期)硅晶片交付给客户。三星自家的猎户座 8895,以及高通的骁龙 835,都采用这种工艺制造,而 10nm 第二代 LPP 版和第三代 LPU 版将分别在年底和明年进入批量生产。 手机芯片市场上已经进入了 10nm、7nm 处理器的白热化竞争阶段,而 14/16nm 制程的争夺也不过是一两年前的事。 总线位宽 总线位宽决定输入/输出设备之间一次数据传输的信息量,用位(bit)表示,如总线宽度为8位、16位、32位和64位。
-
简单易懂!让你快速了解并掌握Gin框架中的JWT功能