整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

PHP笔记(二) HTML表单

多数PHP程序都使用HTML表单从用户那里获取数据并计算结果。

HTML表单的一些基本原则

  • 选择适合于收集的数据类型和提供交互方式的控件。
  • 清楚标记每一个控件，这样用户就可以理解其功能。
  • 尽可能将标签对齐。将控件的左边缘对齐。
  • 将相关的标签分组，并且通过设计中使用空白将每一个分组分开。
  • 表单上的控件顺序应该类似于用户操作他们的顺序。

创建基本HTML表单

首先创造一个基本的HTML大纲，包含表单控件；然后将控件进行合并（HTML表单必须包括一个提交按钮，用户单击它可以将表单数据发送到服务器。）一个单独的HTML页面可以包含多个表单。

  • 创建HTML结构

包含表单的HTML结构和和普通的HTML结构一样。

<HTML>
  <HEAD>
  <TITLE>标题放在这</TITLE>
  </HEAD>
<BODY>
  表单页面放在这
  </BODY>
  </HTML>

在包含表单的HTML页面中可以使用任何HTML标签。基本的表单使用FROM标签来说明。该标签中METHOD属性接收GET或POST两个值中的一个。ACTION属性子明PHP脚本的url，该脚本可以收集通过表单收集的数据，可以是绝对路径或者相对路径。

<FORM METHOD="method" ACTION="url"> 
  中间可以放置表单控件
  </FORM>
  • 合并控件

两个常用的基本控件：文本框和提交按钮。

文本框：允许用户键入信息以发送给PHP脚本。NAME属性为文本提供名称，PHP脚本可以通过名称准确访问其内容，因此它应该是唯一的且符合PHP变量命名规则（但不需要$符号），单标签。VALUE属性指明出现在提交按钮上面的标题。创建方式如下：

<INPUT TYPE = "TEXT" NAME="text">

提交按钮：允许用户将一个表单的内容发送到服务器，一个HTML表单对应应该有一个提交按钮。

示例：一个完整的HTML表单。

<HTML>
  <HEAD>
  <TITLE>标题</TITLE>
  </HEAD>
<BODY>
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
</FORM>
  </BODY>
  </HTML>


  • 使用多个表单

可以在一个HTML页面中包含多个表单，注意下一个表单的FORM开始之前需要结束前一个FORM表单。

<HTML>
  <HEAD>
  <TITLE>标题</TITLE>
  </HEAD>
<BODY>
  
<FORM METHOD="POST" ACTION="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data">
<BR/>
<BR/>
</FORM>

<FORM METHOD="POST" NAME="phpinfo.php">
<INPUT TYPE="TEXT" NAME="user_name1">
<BR/>
<BR/>
<INPUT TYPE="TEXT" NAME="user_email1">
<BR/>
<BR/>
<INPUT TYPE="SUBMIT" VALUE="Send the Data1">
</FORM>

  </BODY>
  </HTML>


创建表单控件

  • 创建自定义的文本框

文本框的属性中，TYPE和NAME是必须的，其余是可选属性。SIZE属性用于设置文本框的可视大小；MAXLENGTH指明用户键入字符的最大长度；VALUE给出了一个最初显示在文本框中的值。

<input type="text" name="" size="" maxlength="" value="">
  • 创建文本区域

文本区域可以输入多行文本。NAME和ROWS属性是必须的。ROWS属性表明了文本区域内可以看到的文本行数，充满时会滚动。COLS属性指明可见文本列数与行数类似。WRAP属性指明文本区域内单词换行的方式，可以指定如下值。该标签为双标签。

值

说明

off

禁止单词换行但用户可以输入换行符强制换行

virtual/soft

各行显示为换行，但是换行并没有被发送到服务器

physica/hard

启用了单词换行

<inputarea name="" rows="" cols="" wrap="">
  • 创建密码框

创建密码框的语法与文本框相同，但要将TYPE属性指定为PASSWORD而不是TYPE。

<input type="password" name="" size="" maxlength="" value="">
  • 创建复选框

取两个值中的一个，即二选一。TYPE属性是必须的，checked属性出现，该复选框默认情况会被选定。value属性指定复选框被选定情况下被发送到服务器的值，默认发送on值。法如下：

<input type="checkbox" name="" checked value="">
  • 创建单选按钮

语法与复选框属性含义相同，但是TYPE属性的值必须是RADIO，NAME属性是必须的。

<input type="radio" name="" checked value="">
  • 创建列表框

用户可以选择一个或者多个选项，它是一个滚动菜单。

<select name="" multipile size="">options go here</select>

name属性是必须的，multipile属性指明用户可以通过按下crtl键并单击多个选项来选择它们

列表框的单选行为可作为单选按钮。

<option selected value="text"></options>
  • 创建隐藏域
<input type="hidden" name="text"value="">
  • 实现上传文件的HTML表单
<input type="FILE" name="name" accept="time" value="text">

其中type属性是必须的。格式通过使用MIME码指定。常用的格式如下：

超文本标记语言文本 .html,.html text/html

　　普通文本 ：txt text/plain

　　word文档：application/msword

　　RTF文本 ：rtf application/rtf

　　GIF图形 ：gif image/gif

　　JPEG图形 ：jpeg,

　　jpg： image/jpeg

　　au声音文件：au audio/basic

　　MIDI音乐文件 ：mid,.midi audio/midi,audio/x-midi

　　RealAudio音乐文件 .ra, .ram audio/x-pn-realaudio

　　MPEG文件 .mpg,.mpeg video/mpeg

　　AVI文件 .avi video/x-msvideo

　　GZIP文件 .gz application/x-gzip

　　压缩文件.rar application/octet-stream

　　压缩文件.zip application/x-zip-compressed

　　TAR文件 .tar application/x-tar

更多提交表单的信息

  • 使用图像提交数据
<input type="image" src="url" name="text" align="align">
  • 创建重置按钮
<input type="reset" value="text">

业级信息化系统绝大部分采用BS架构实现，如门户网站、OA系统、电商网站等，通过浏览器输入Web网址即可访问，对于使用者来说非常便捷，对于开发维护者来说也非常方便，程序维护只需更新服务器即可，使用者无感知。但是CS架构的WinForm客户端程序仍然具有很实用的价值，如WPS、IT类的集成开发环境（数据库、图形处理软件）、PC端的小工具。本地程序处理性能更优秀，但是频繁更新带来不友好的客户端体验。还有一种非常常见且实用的业务场景， Web网页与WinForm程序互相集成应用。

　　在百度网盘的网页中，点击【下载】按钮，首先会检查本地是否已经启动客户端网盘。如果未启动，则弹出提示信息告知用户需要打开客户端程序进行下载。这就是一个典型的Web网页中启动客户端程序的场景。更形象的应用场景是，WinForn/WPF客户端程序嵌入Web程序，Web程序的网页中js调用WinForm/WPF窗体以及业务方法。后面会详细的介绍。

　　WinForm程序中集成网页的基本原理就是通过一个包含类似浏览器功能的控件，将Web网页载入并解析渲染出来。下面主要介绍 WinForm 集成 Web 网页的几种实现方式。

　　谈论集成的问题之前，先了解一下浏览器的内核。

　　浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

内核分类

  • Trident（MSHTML、IE内核）

　　内核被包含在全世界最高的使用率的操作系统中，即为Windows操作系统，所以我们又经常把它称之为IE内核。

　　Trident内核的常见浏览器有：　

    • IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）、IE11
    • 360安全浏览器（1.0-5.0为Trident，6.0为Trident+Webkit，7.0为Trident+Blink）
    • 360极速浏览器（7.5之前为Trident+Webkit，7.5为Trident+Blink）
    • 百度浏览器（早期版本）
    • 世界之窗浏览器（最初为IE内核，2013年采用Chrome+IE内核）
    • UC浏览器（Webkit内核+Trident内核）
    • 其他等

　　其中部分浏览器的新版本是“双核”甚至是“多核”，其中一个内核是Trident，然后再增加一个其他内核。国内的厂商一般把其他内核叫做“高速浏览模式”，而Trident则是“兼容浏览模式”，用户可以来回切换。

  • Gecko（Firefox内核）

　　Gecko内核常见的浏览器：Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位开源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon。

  • Webkit（Safari内核，Chrome内核原型，开源）

　　WebKit内核常见的浏览器：Chrome、傲游浏览器3、Apple Safari （Win/Mac/iPhone/iPad）、Symbian手机浏览器、Android 默认浏览器。

参考网站：https://liulanmi.com/labs/core.html

  • Blink

　　Blink是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分，并且在2013年4月的时候公布了这一消息。这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用。

浏览器内核检测

  • ie.icoa.cn

https://ie.icoa.cn 可检测 PC 或手机浏览器内核和操作系统类型，包括Google Chrome的WebKit、IE的Trident、ME的Edge、Firefox的Gecko/Servo，以及Windows/MacOS/Linux/iOS/Android等的判断。

  • http://mybrowse.osfipin.com

WinForm Browser 控件

  • WebBrowser

　　　微软WinForm开发框架中老牌控件。

    • 默认基于IE7内核，对H5网页加载支持不完善。
    • 只支持单线程模式，大部分对其操作必须在创建它的线程中执行，不可以在其它线程中调用其方法或属性。
    • 性能相对较弱。
  • CefSharp【推荐】

　　CefSharp是一种将功能齐全的符合标准的web浏览器嵌入C#或VB.NET应用程序的简单方法。CefSharp拥有WinForms和WPF应用程序的浏览器控件，以及自动化项目的OffScreen版本。CefSharp基于Chromium Embedded Framework，这是Google Chrome的开源版本。

    • CefSharp中文帮助文档，请点击查看
    • 免费、开源：https://github.com/cefsharp/CefSharp
    • 支持JS、C#、WinForm窗体之间相互通讯与调用。
    • 兼容性较好，支持H5、CSS5、WebGL等。
    • 支持获取Cookies较全面。

实际项目应用效果如下：

  • Miniblink

　　Miniblink是一个追求极致小巧的浏览器内核项目，全世界第三大流行的浏览器内核控件。其基于chromium最新版内核，去除了chromium所有多余的部件，只保留最基本的排版引擎blink。Miniblink保持了10M左右的极简大小，是所有同类产品最小的体积，同时支持windows xp、npapi。


    • 开源地址：https://github.com/weolar/miniblink49/releases
  • GeckoFX

　　GeckoFX是skybound工作室开发的一个开源的用于方便将gecko引擎（最主要的浏览器是firefox）链接到.net 窗体应用的一个组件。它是用C#写成的，里面有大量的C#的注释，geckofx是最完美的默认的iE核心webbrowse控件的替代控件。

  • DotNetBrowser

　　DotNetBrowser能嵌入一个基于Chromium的WPF或WinForms组件到你的.NET应用中，用来显示使用HTML5、CSS3、JavaScript、Silverlight等技术构建的现代网页。

    • 收费
  • EO.WebBrowser
    • 官网：https://www.essentialobjects.com/Products/WebBrowser/Default.aspx
    • 收费

  • Microsoft Edge WebView2

　　Microsoft Edge WebView2 控件允许在本机应用中嵌入 web 技术(HTML、CSS 以及 JavaScript)。 WebView2 控件使用 Microsoft Edge(Chromium) 作为绘制引擎，以在本机应用中显示 web 内容。 使用 WebView2，可以在本机应用的不同部分嵌入 Web 代码，或在单个 WebView 实例中生成所有本机应用。

    • 官网：https://docs.microsoft.com/zh-cn/microsoft-edge/webview2
    • 免费。
    • 诞生较晚，相比CefSharp，功能较弱。

所以在客户端程序中嵌入网页程序，首选CefSharp。

欢迎关注、点赞、评论、转发，每天都能获取IT优质内容。

#人民网评钱枫被指性侵#

网页中添加视频、声音、动画等，可以增强用户体验。在HTML5之前，为网页添加多媒体的唯一办法，就是使用第三方的插件（如，Adobe Flash等）。

HTML5中，提供了对多媒体的原生支持，只需通过 video 元素，就可以向网页嵌入视频、电影或音频资源，通过 audio 元素向网页嵌入音频资源，省时省力。

HTML中嵌入视频和音频代码

一、视频

在HTML5时代，在网页中嵌入视频非常简单，只需要一个 video 元素，并设置它的 src 属性，使其链接一个视频地址就可以完全搞定了，这个太esay了

<video src="media/vedio.mp4"></video>

把这个网站在IE8中打开一看，网站上除了一片空白外，什么也没有，这是为什么呢？

原来 video 是HTML5最新引入的元素，并不是所有浏览器都支持它，IE8及以下版本都无法识别 video 标签。如果浏览器不识别 video标签，则会忽略它，当做什么都没有。这就是网站上一片空白的原因。

这个问题好解决，只需在 video 标签之间放置文本信息，不支持 video 标签的老浏览器，会显示 video 标签之间的文本信息，以提示用户浏览器不支持 video，就这么简单！

<video src="media/vedio.mp4">

你的浏览器已经老掉牙了，不支持video，还不赶快使用现代浏览器O(∩_∩)O~！

</video>

在IE8上打开一看，确实显示了提示文本，这下好多了，至少用户知道自己的浏览器不能播放视频，该换浏览器了。

下载了Opera浏览器的最新版本25.0，打开一看，怎么还是一片空白外！Opera浏览器明明是支持video标签的，那又是为什么呢？

这个就得从视频的编码格式说起了。video 元素支持三种视频格式：Ogg、MP4、WebM。

Ogg是带有Theora视频编码和Vorbis音频编码的文件，后缀名为 .ogg；MP4是带有H.264视频编码和AAC音频编码的MP4文件，后缀名为 .mp4；WebM是VP8视频编码和Vorbis音频编码的文件，后缀名为 .webm。

这个Opera浏览器呢，它可以支持ogg，但不支持mp4。由于Opera支持video标签，故video标签之间的文本信息没有显示出来，但它不支持ogg，所以就不进行播放，最终导致页面出现一片空白。这下可怎么办呢？

其实办法有的是，我们可以从网上下载一副图像，放到视频播放窗口，如果视频无法播放，就显示这张图片，是不是更好呢？从网上下载一张美女图片，干脆叫beauty.jpg吧。那这个图像怎么添加到视频窗口呢？

video标签有个poster 属性，就是专门在视频窗口放置图片的。poster是一个video的占位符，无论什么情况下，只要视频还没有播放（视频下载过程中、视频不存在、不支持该视频类型、用户点击播放按钮前），就会显示该图像，可以看做是视频播放之前插入的宣传画或海报。

<video src="media/vedio.mp4" poster = "img/beauty.jpg">

你的浏览器已经老掉牙了，不支持video，还不赶快使用现代浏览器O(∩_∩)O~！

</video>

在Opera浏览器上刷新一下，真的有一个美女冲着自己微笑呢。虽然视频没有播放出来，这回心情却是好多了。

那我可不能一天到晚只看美女呀，视频还是还是要想办法播放出来的。既然Opera浏览器不支持mp4，我们就换成需要ogg吧，这样就肯定没问题了。

我想了想，这个办法不好，万一某个浏览器只支持支持ogg，不支持mp4呢。这年头，什么都缺，就是不缺点子，随便在网上一搜，办法就有了。

在 video 元素中添加 source 元素，就可以解决这个问题。在source 元素中，通过 src 属性指定视频的地址，通过 type 属性指定视频的类型，以帮助浏览器决定是否能播放该视频。并且，在 video 元素中可以添加任意多个source 元素，让不同的 source 元素链接到不同的视频文件。

这样的话，当浏览器发现 video 元素时，首先会查看它本身是否定义了 src 属性。如果没有，就会检查 source 元素。浏览器会逐个查看这些视频源，直到找到一个可以播放的视频。一旦找到，就会播放它并忽略其他的视频源。我们干脆添加两个source，一个是mp4，一个是ogg，这下视频是一定能播放出来了。

<video poster = "img/beauty.jpg">

<source src="media/vedio.mp4" type="video/mp4">

<source src="media/vedio.ogg" type="video/ogg">

你的浏览器已经老掉牙了，不支持video，还不赶快使用现代浏览器O(∩_∩)O~！

</video>

在Opera浏览器上又刷新一下，只有美女冲着我微笑，视频还是没播放出来。唉，太粗心了，忘记添加播放视频的控件了。

在video标签中，通过添加controls 属性来为视频添加播放控件，方便用户执行播放、暂停操作和音量控制。

<video poster = "img/beauty.jpg" controls>

（此处略去500字…）

</video>

在Opera浏览器上又刷新一下，效果真的不一样，这次不仅看到美女，还看到了视频控件。用鼠标猛戳一下那个播放按钮，哈哈，不错，真的听到美妙的旋律。我们的ogg文件，终于播放出来了，让我们好好享受一下吧O(∩_∩)O。

听了一会，忽然一想，不对呀，我刚才点了播放按钮后，等了半天才听到声音。能不能我一点播放按钮，就立即播放呢？

原来视频也是需要下载缓存的，点击播放按钮后，首先缓存，然后才播放的。那能不能在页面加载的同时就缓存呢。这样，用户点击播放后，就不必等待了。

这当然可以，在video标签中，通过添加preload属性来为视频添加预加载功能，在页面加载的同时加载视频。

<video poster = "img/beauty.jpg" controls preload>

（此处略去500字…）

</video>

关于 preload 属性，稍微再啰嗦一点，就是可以把它设置为 metadata，让浏览器仅仅预加载视频的基本信息，如尺寸、时长、以及一些关键的帧。这样的话，在开始播放之前，浏览器可以提前计算视频的显示尺寸。

既然一切都OK了！让我们看看mp4是不是能正常播放。下载最新版的Google Chrome 38.0浏览器，打开网页，猛戳一下播放按钮。

等等~，等等~，不对，怎么只有声音没有画面，明明是mp4格式的文件呀？使用暴风影音试了一下，是有画面的呀！

辛辛苦苦又在网上搜了一番，花了整整586秒，终于找到了答案。mp4视频需要h.264编码格式才会有图像的。

找了一个 h.264 编码格式的 mp4 试了一下，不错，确实有图像了！看了半天，原来是一部老外的电影，叽里咕噜一阵，一句话也没听懂。那O(∩_∩)O~，能否提供中文字幕呢，这样就不必费老大劲去听了！

HTML5中，通过在video元素添加track元素为视频添加字幕。字幕文件有两种格式：WebVTT和TTML。WebVTT是Web视频文本轨迹（Web Video Text Track），是UTF-8编码格式的文本文件；TTML是时序文本标记语言（Timed Text Markup Language），是XML格式的文件。两种文件的具体格式，已经超出我们的讨论范围。

video元素支持添加多个track元素，不同的track元素链接到不同的字幕文件。用户可以在各个字幕间进行切换。

<video poster = "img/beauty.jpg" controls preload>

<track src="en_track.vtt" kind="subtitles" srclang="en" label="English" default>

<track src="cn_track.vtt" kind="captions" srclang="zh" label="简体中文">

</video>

track元素中，src属性指定字幕文件的URL；srclang属性字幕文件的语言类型，若kind 属性值是 "subtitles" 时，该属性必需的；label 属性指定字幕标签，每个字幕元素必需设置一个唯一不重复的标签，切换字幕时，会显示标签的名称；kind指定字幕内容类型，只能是subtitles、captions、descriptions、chapters、metadata 之一；default属性指定是否是默认字幕，如果一个都没指定，将不会自动显示字幕。

除了字幕外，我还希望对视频进行过多的控制，比如让视频自动播放、循环播放、默认静音，以及视频窗口的尺寸等等，这些都能做到吗？

这已经不是什么事了，video 元素已经提供了相关属性，根据需要设置相应的属性就可以了。这些属性及含义见表 23：

HTML中嵌入视频和音频代码

哦，原来这么简单呀！那就到此为止吧，网页中嵌入视频的全部代码都在这里，就打包给你吧！

<video width="300" poster="img/beauty.jpg" controls preload autoplay loop muted>

<source src="media/vedio.mp4">

<source src="media/vedio.ogg">

<track src="en_track.vtt" kind="subtitles" srclang="en" label="English" default>

<track src="cn_track.vtt" kind="captions" srclang="zh" label="简体中文">

你的浏览器已经老掉牙了，不支持video，还不赶快使用现代浏览器O(∩_∩)O~！

</video>

睁大眼睛一看，却只有7行代码。然而，就这区区7行代码，可把他折磨得够呛。

看着这一切都全部搞定，他仰望着天空，长长呼了一口气，显得是那么的放松，那么的惬意。此时，他闭上眼睛，在自己的梦幻世界里遨游！


二、音频

有了在网页中嵌入视频的经历，要在网页中嵌入音频，那简直就是小菜一碟了。只要把vedio元素换成 audio 元素，就全部搞定。

但需要了解的是，audio 所支持的音频格式只有Ogg Vorbis、mp3 和 wav。还要知道，由于音频没有画面，也就没有 width、height、poster 属性，而其他属性都支持，并且跟视频的含义相同。

网页中嵌入音频的代码如下：

<audio controls preload autoplay loop muted>

<source src="media/audio.mp3">

<source src="media/audio.wav">

<source src="media/audio.ogg">

你的浏览器已经老掉牙了，不支持audio，还不赶快使用现代浏览器O(∩_∩)O~！

</audio>


在线咨询
上一篇：现代编程语言哪家强？2020年，你或许应该了解这7门编程语言
下一篇：零基础入门前端HTML知识整理

您的项目需求

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

推荐阅读
友情链接 佛坪县 建湖县 清流县 龙安区 娄星区 平江县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服