HTML5的表单设计

用过Delphi的程序员，对Form这个词应该比较熟悉。在Delphi中，Form被翻译为“窗体、窗口”，作用是：为用户提供界面，供用户输入信息，向用户展示处理结果。

HTML5中也有Form，功能与Delphi中的Form差不多，用于接收用户输入，和服务器进行交互。不过HTML5中的Form，中文一般译为“表单”。

1、Web前端与Web后端的交互

Web前端，指浏览器上展示的HTML文件，以及HTML文件使用的CSS文件及JavaScript脚本。

Web后端，指运行在服务器上的，为Web前端提供服务的软件，Web后端也常常被称为Web服务器。

在HTML5中，Web前端与Web后端交互的流程一般如下：

（1）Web前端向Web后端发起HTTP请求；

（2）Web后端收到HTTP请求后，进行业务处理；

（3）Web后端向Web前端返回HTTP响应。

到目前为止，我们在HTML5中碰到的Web前端发起HTTP请求的方式有两种：

第1种：HTML页面通过<a>元素向用户提供超级链接，用户点击该链接时，会向服务器发起请求；

第2种：HTML页面通过表单为用户提供输入界面，用户提交表单时，会向服务器发起请求。

2、GET请求和POST请求

HTTP请求有八种，对Web前端开发者来说，最常用的是GET请求和POST请求。

GET请求：向Web后端请求指定的页面；GET请求携带的数据，以URL参数的形式提供；

POST请求：向Web后端提交数据，请求Web后端对数据进行处理；POST请求携带的数据，在请求消息体中提供。

在HTML5中，用户点击链接地址，Web前端向后端发起GET请求；

在HTML5中，用户提交表单，Web前端可以向后端发起GET请求，也可以发起POST请求。

说明：由于目前没有和后端服务器对接，为了便于对表单设计进行展示，下面的例子HTML文档，都是用GET请求来提交数据。

3、表单的主要元素

<form>元素：表示表单；

<input>元素：表单中的输入控件，输入控件可以是文本框、单选框、复选框、按钮等等；

<label>元素：表单中的标签控件；

<button>元素：表单中的按钮控件；

<select>与<option>元素：用于实现列表框和下拉菜单；

<textarea>元素：多行文本控件。

4、表单提交文本框的输入

下面是一个可以提交文本框输入的HTML文档：

<!DOCTYPE html>
<html>
<head>
<title>form001</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>请输入您的姓名：</label>
<input type="text" name="name" />
<br/>
<input type="submit"/>
</form>
</body>
</html>

在浏览器中打开该HTML文档时，展示效果如下：

我们可以在文本框中输入信息，例如输入tom：

当我们点击“提交”按钮后，浏览器显示信息如下；

可以看到，数据被提交给process.html页面，并且附带了一个参数name，且值为我们输入的tom。

5、表单提交用户对单选框的选择

下面是一个可以提交单选框被选信息的HTML文档：

<!DOCTYPE html>
<html>
<head>
<title>form002</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>性别：</label>
<br/>
男：<input type="radio" name="gender" value="male" />
女：<input type="radio" name="gender" value="female" />
<br/><br/>
<label>国籍：</label>
<br/>
中国：<input type="radio" name="nationality" value="Chinese" /> <br/>
美国：<input type="radio" name="nationality" value="American" /> <br/>
日本：<input type="radio" name="nationality" value="Japanese" /> <br/>
英国：<input type="radio" name="nationality" value="English" /> <br/>
其它：<input type="radio" name="nationality" value="Other" /> <br/>
<br/>
<input type="submit"/>
</form>
</body>
</html>

在浏览器中打开该HTML文档时，显示效果如下：

我们可以选择性别和国籍，例如我们选择“男”和“中国”：

当我们点击“提交”按钮后，浏览器显示信息如下：

可以看到，我们选择的信息被提交给process.html文件，并且附带了gender参数的值为male，nationality参数的值为Chinese。

6、表单提交用户对复选框的选择

下面是一个可以提交复选框被选信息的HTML文档；

<!DOCTYPE html>
<html>
<head>
<title>form003</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>请选择您的业余爱好：</label>
<br/>
美术：<input type="checkbox" name="hobby" value="Art" /> <br/>
足球：<input type="checkbox" name="hobby" value="Football" /> <br/>
唱歌：<input type="checkbox" name="hobby" value="Singing" /> <br/>
厨艺：<input type="checkbox" name="hobby" value="Cook" /> <br/>
其它：<input type="checkbox" name="hobby" value="Other" /> <br/>
<br/>
<input type="submit"/>
</form>
</body>
</html>

在浏览器中打开该HTML文档时，显示效果如下：

我们可以选择自己的业余爱好，例如我们选择足球、唱歌、厨艺：

当我们点击“提交”按钮后，浏览器显示信息如下：

可以看到，我们选择的信息被提交给process.html文件，并且附带了三个hobby参数，其值分别为Football，Singing和Cook。

7、表单提交用户对下拉菜单的选择

下面是一个可以提交下拉菜单被选信息的HTML文档；

<!DOCTYPE html>
<html>
<head>
<title>form004</title>
<meta charset="utf-8" />
</head>
<body>
<form action="process.html" method="get">
<label>请选择您的学历：</label>
<br/>
<select name="education">
<option value="primary_school">小学</option>
<option value="junior_high_school">初中</option>
<option value="senior_high_school">高中</option>
<option value="college">大学</option>
</select>
<br/><br/>
<label>请选择您的兴趣爱好：</label>
<br/>
<select name="hobby" multiple="true">
<option value="Art">美术</option>
<option value="Football">足球</option>
<option value="Singing">唱歌</option>
<option value="Cook">厨艺</option>
<option value="Other">其它</option>
</select>
<br/><br/>
<input type="submit"/>
</form>
</body>
</html>

在浏览器中打开该HTML文档时，显示效果如下：

我们可以单选我们的学历，也可以通过按下Shift+鼠标键多选我们的兴趣。例如我们选择“初中”学历，选择“美术”和“厨艺”两项爱好：

当我们点击“提交”按钮后，浏览器显示信息如下：

可以看到，我们选择的信息被提交给process.html文件，并且附带了education参数和两个hobby参数，education的值为junior_high_school，hobby的值为Art和Cook。

上面列举了几种控件的HTML5表单设计方法，其它的控件也大概差不多，把多个控件组合在同一个<form>元素中的方法也是相同的，这里就不再赘述了。

TML5新特性

(1)新的语义标签 header;footer

(2)增强型表单

新 input type

number;email;url;date;color

新 element

datalist

建议列表

progress

进度条

meter

刻度尺

output

新 attr

placehodler;autofocus;minlength;maxlength;min;max;

(3)视频和音频

视频

? mp4 安装mp4解码器

? avi 安装avi解码器

autoplay;controls;muted;poster;preload

js volume;playbackRate;paused;

play() pause() onplay onpause()

音频

(4)绘图 Canvas

网页中绘图三种技术

svg

2d矢量图

矢量图由一个一个线条组件

无限放大缩小不会失真

百度地图

flash动画效果

canvas

2d位图

webgl

3d位图

three.js

canvas

开发流程

创建画布 <canvas width="" height=""></canvas>

获取画布

var c3 = document.getElementById("c3");

创建画笔

var ctx = c3.getContext("2d");

矩形

ctx.lineWidth = 1;

ctx.strokeStyle = "#fff"

ctx.strokeRect(x,y,w,h);

ctx.fillStyle= "#fff"

ctx.fillRect(x,y,w,h);

ctx.clearRect(x,y,w,h);

文本

ctx.font=""

ctx.textBaseline = "";

ctx.fillText(str,x,y);

ctx.strokeText(str,x,y)

ctx.measureText(str).width

路径

路径由多个坐标点组件本身不可见但可以用描边填充

ctx.beginPath() 开始一条新路径

ctx.closePath() 闭合一条路径

ctx.moveTo(x,y) 移动到指定点

ctx.lineTo(x,y) 从当前点到指定点画一条直线

ctx.arc(cx,cy,r,start,end)

cx/cy 圆心

r 半径

start 起始角度

end 终止角度

ctx.stroke()

ctx.fill()

画像

图像保存服务器中,canvas客户端技术下载

var p3 = new Image()

p3.src = "img/p3.png"

p3.onload = function(){}

ctx.drawImage(p3,x,y,w,h)

变形

ctx.rotate(弧度)

旋转角度，旋转画笔

ctx.translate(x,y)

平移原点[轴点]

ctx.translate(250,200)

0,0 原先左上角->0,0 画布中心

ctx.save(); 保存画笔状态 {原点,角度;颜色...}

ctx.restore(); 恢复画笔状态

渐变对象

var g = ctx.createLinearGradient(0,0,500,0)

g.addColorStop(offset,color)

ctx.fillStyle = g;

ctx.fillRect(0,0,100,30)

(5) SVG

区别

矢量图

标签

每个元素都可以绑定事件

统计图

创建元素

字符串拼接

var html = "<rect></rect>"

svg.innerHTML = html

创建元素

var r = document.createElementNS("http://www.w3.org/2000/svg","rect")

r.setAttribute("fill","")

svg.appendChlid(r)

删除

svg.removeChlid(c)

svg.innerHTML = ""; 所有元素清除

图形

椭圆

直线

折线

<polyline points="x,y x,y.."

文本

图形

<image xlink:href="x.mpr"></image

特效对象

渐变对象

滤镜

第三方绘图库

d3/echarts

加载 echarts.min.js

var mychart -= echarts.init(...main)

var option = {} 配置项

mychart.setOption(option)

(6)拖放API

操作:拖动和释放

源对象(动)

ondragstart

ondrag

ondragend

目标对象

ondragenter

ondragover

ondragleave

ondrop

(7)地理定位

geolocation

百度地图

(8)WebWorker

创建新线程执行耗时JS任务

var w = new Worker("x.js")

w.postMessage(str)

x.onmessage = function(e){e.data}

(9)Web Storage

客户端存储数据

sessionStorage

当前会话中生效

会话:

获取数据

var value = sessionStoage.getItem(key)

获取数据

var value = sessionStoage[key]

保存数据

sessionStoage.setItem(key,value)

保存数据

sessionStorage[key] = value

清除数据

sessionStorage.clear()

数除数据

sessionStorage.removItem(key)

数据个数

sessionStorage.length

获取key

var key = sessionStorage.key(i)

localStorage

(10)Web Socket

天是2021.7.14,是个好日子.好久没发布文章了.今天发布下如何在在html页面中使用vue3.义县游学电子科技一直以技术文章为主.以下是h5的页面源码:

<html>
<script src="https://unpkg.com/vue@next"></script>

<body>
<div id="vue">
<div v-html="rhtml"></div>
<props-demo-simple></props-demo-simple>

</div>

</body>
<script>
const htmls={
data(){
return{
rhtml:"<h1>html页面中引用VUE3的演示页面</h1>",
}
}
}

const app=Vue.createApp(htmls)

// 简单语法注册或获取全局组件.注册还会自动使用给定的 id 设置组件的名称
app.component('props-demo-simple', { data() {
return {
count: 0
}
},
props: ['size', 'myMessage'],template: `
<button v-on:click="count++">
You clicked me {{ count }} times.
</button>`
}

)
app.mount("#vue")
</script>
</html>

分析下:首先<script src="https://unpkg.com/vue@next"></script>,引入vue3的脚本地址. 然后在body下的<script>中书写vue3的代码即可. 下图是运行的结果效果

在线咨询

上一篇：HTML大整合（上）
下一篇：html基础必备，前端小白一看就会

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML5的表单设计

1、Web前端与Web后端的交互

2、GET请求和POST请求

3、表单的主要元素

4、表单提交文本框的输入

5、表单提交用户对单选框的选择

6、表单提交用户对复选框的选择

7、表单提交用户对下拉菜单的选择

您的项目需求