HTML5和css3实例：制作HTML5验证的网页表单

文章简介：今天我们一起来看看如何创建一个实用并且功能强大的表单，表单使用如今最热门的技术HTML5和css3来创建，并且可以通过HTML5进行客户端验证。

今天我们一起来看看如何创建一个实用并且功能强大的表单，表单使用如今最热门的技术HTML5和css3来创建，并且可以通过HTML5进行客户端验证。

查看预览下载附件

第一步：策划表单功能

首先，我们得为我们的表单策划一下该有什么功能，用什么形式表现。在这个示例中，我们就制作一个比较简单的留言表单。需要的功能如下：

  • 名称
  • 电子邮件
  • 网站地址
  • 提交按钮

我们都希望用户能够填写正确的信息再提交，要实现这一点，我们可以使用HTML5客户端验证新技术。那怎么样使用这个功能呢？在这里简单的使用服务器验证，不做进一步的深入了解。

第二步：策划表单形式

在我心中，憧憬着一个美丽而简约的提交表单。虽然现在很丑，但是他不是野鸡是凤凰。

就像上图显示的，包含下面几个部分：

  • 表格标题（Required fields）
  • 表格标签
  • 表格输入（Placeholder text）
  • 表单提示
  • 提交按钮

现在我们已经确定好了表单的形式，就开始创建HTML结构代码。

[1] [2] [3] [4]  下一页

时间： 2024-11-01 10:39:36

HTML5和css3实例：制作HTML5验证的网页表单的相关文章

实例学习网页制作中常用的网页表单的应用

网页 说实话,无论是asp,php还是jsp进行网络编程的时候,都离不开和用户的交互. 而人机对话的平台,基本上是靠相应的文本.列表框进行输入,然后通过按钮提交送至数据库的. 所以学习网络编程就一定要了解这些输入平台相关的东西:表单(form)其基本格式如下: <form name="form1" action="xxx.asp" method="post"><input type="text" name=&

网页制作中常用的网页表单的应用

    说实话,无论是asp,php还是jsp进行网络编程的时候,都离不开和用户的交互. 而人机对话的平台,基本上是靠相应的文本.列表框进行输入,然后通过按钮提交送至数据库的. 所以学习网络编程就一定要了解这些输入平台相关的东西:表单(form)其基本格式如下: <form name="form1" action="xxx.asp" method="post"> <input type="text" name

WEBJX收集30个优秀的网页表单制作实例

这里是30个相比风格更加明显,更注重"外貌"的包括评论表单在内的一些优秀的表单应用设计,任何人都希望可以在使用产品的同时能获得愉悦的感受,因此,一个提供易用漂亮的交互方式的Web表单可以吸引更多用户的响应,在愉悦使用的同时留下更直观的视觉印象. 相关文章: 网页设计师参考:网页登录表单设计实例 网页交互设计参考:漂亮的网页登陆表单设计实例 CSS网页设计实例:15个用CSS设计的网页表单实例 1. Synch Media 2. Ft designer 3. Glass house 4.

用dreamvear制作的网页表单内容链接数据库，不知道为什么提示错误，求大神指点，在线等

问题描述 用dreamvear制作的网页表单内容链接数据库,不知道为什么提示MicrosoftVBScript编译器错误错误'800a0408'无效字符/s071203237/regconfirm.asp,行17STUID=request.form("STUID")-------------------------^代码如下:<body><%dimconnsetconn=server.CreateObject("ADODB.CONNECTION")

【实战HTML5与CSS3】用HTML5和CSS3制作页面（上）

原文 http://www.cnblogs.com/yexiaochai/archive/2013/05/04/3059375.html 前言 周一离职并且入职了,于是开始了做新项目,那天我问了下前端大哥,我们做的项目需要兼容哪些浏览器,他说需要兼容IE9以上与chrome,ff,我一下就诡异的笑了.... 这不是HTML5与CSS3项目的温床吗?这次真的捡到宝了,再也不用担心IE678的问题了,可以肆意的使用最新的技术了. 紧接着问题也来了,我现在需要切图了,对于我这种前端,css一直是短板,

网页设计参考:很不错的15个HTML网页表单设计实例

通过PS我们可以设计出各种样子的表单,不过其中许多最后都需要转成HTML表单页面,在大多数表单中如果不能基于CSS制作的话就无法在很多场合应用.因此网页设计师在设计表单时需要考虑的问题就是如何将其转化为HTML+CSS的页面形式. 虽然HTML无法制作出十分酷的表单,不过也能制作出许多出色的表单页面,本文中的表单都是HTML形式,可以参考这些设计以及HTML页面,同时也能访问相关网站查看这些HTML的写法. Footytube 提示:进入页面后,点击页面顶部的"login"链接,可看到

初学好文：HTML网页表单制作实例讲解

初学|网页 文本框 代码格式:<input type="text" name="..." size="..." maxlength="..." value="..."> 属性解释: type="text"定义单行文本输入框: name属性定义文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称: size属性定义文本框的宽度,单位是单个字符宽度: maxlength

CSS实例教程:制作漂亮的网页表单

初中级练习,高手朋友们可以飘过.要求达到如下图所示的效果,各位不妨试一试~   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang=

用户体验设计实例分析:网页表单设计

原文:http://visitmix.com/Articles/Web-Forms-for-People 作者:Luke Wroblewski 译者:江力   随着网络的发展,人们通过各种方式使用它.今天,网络购物,跟朋友或者不认识的人聊天,管理银行账户,以及一些日常应用,共享照片或视频,等等.事实上,只要能在线使用的应用基本上都已经有了. 虽然这些多样化的应用丰富了互联网,但这些任务的完成还需要一些步骤.不管是在线交易验证.评论新文章,还是管理某个应用,WEB表单总会出现在人们的视线中. 为什