加载中 ...
首页 > 建站 > 经验 > 正文

让你的表单升级到CSS3和HTML5客户端验证

2019-04-29 13:08:31 来源:

今天我们一路来看看若何建立一个适用而且功能壮大的表单,表单利用现在最热点的手艺HTML5和css3来建立,而且可以经由过程HTML5进行客户端验证。

第一步:筹谋表单功能

起首,我们得为我们的表单筹谋一下该有甚么功能,用甚么情势表示。在这个示例中,我们就建造一个比力简单的留言表单。需要的功能以下:

名称

电子邮件

网站地址

提交按钮

我们都但愿用户可以或许填写准确的信息再提交,要实现这一点,我们可使用HTML5客户端验证新手艺。那怎样样利用这个功能呢?在这里简单的利用办事器验证,不做进一步的深切领会。

第二步:筹谋表单情势

在我心中,向往着一个斑斓而简约的提交表单。固然此刻很丑,可是他不是野鸡是凤凰。

就像上图显示的,包括下面几个部门:

表格题目(Required fields)

表格标签

表格输入(Placeholder text)

表单提醒

提交按钮

此刻我们已肯定好了表单的情势,就起头建立HTML布局代码。

第三步:建立HTML布局代码

按照上面肯定的情势来建立最根基的HTML代码。

HTML5 Contact Form

在这里页面仍是空缺的。这只是一个网页最根基的代码。

第四步:HTML表单

起头在页面中建立表单。

第五步:HTML表单位素

为了更好的理解和保持表单的情势,我们将一步一步的添加表单里面的元素。

那最早起头的是建立表单表头和第一个输入框:

  • 联系我们

    *?暗示必填项

表单提醒

按照我们的筹谋图来看,我们要给表单的“电子邮件”、“网站”增添提醒语,所以我们要在input下面增添提醒语区域,再将他们同一样式处置。

  • 准确格局为:javin@example.com

  • 其余的表单输入元素

    继续添加其他的表单输入元素。

  • 准确格局为:http://

  • “广域创业网”的新闻页面文章、图片、音频、视频等稿件均为自媒体人、第三方机构发布或转载。如稿件涉及版权等问题,请与

    我们联系删除或处理,客服邮箱,稿件内容仅为传递更多信息之目的,不代表本网观点,亦不代表本网站赞同

    其观点或证实其内容的真实性。