HTML5+CSS3构建简易的表单

浏览网页的时候，表单差不多是最常见的形式之一了。对于某些不自动保存账户和密码的网站来说，天天都要给表单敲账户密码。今天记录一下一个简单的表单怎么制作。制作后的效果图如下：
首先在body中输入该表单的组件和文本成分：两个文本输入框；一个下拉选择框；一个提交按钮；注意这里使用label标签来文本修饰这些组件。

<div id="border1"><form><label for="fname">First Name</label><input type="text" id="fname" name="firstname" placeholder="Your first name..."><label for="lname">First Name</label><input type="text" id="lname" name="lastname" placeholder="Your last name..."><label for="country">Country</label><select id="country" name="country"><option value="china">China</option><option value="russia">Russia</option><option value="usa">USA</option></select><input type="submit" value="Submit"> </form></div>

效果如下图所示：

接下来对组件进行竖向排版，在CSS代码区输入以下代码:

input[type=text], select {width: 100%;/*宽度占据整个屏幕*/padding: 10px 5px;/*适当填充，拉开文字与框的间距*/margin: 15px 5px;/*适当填充，拉开框与框的间距*/display: block;/*以block形式展示*/border: 1px solid #ccc;/*给文本框加边框美化*/border-radius: 5px;/*给文本框的直角改为圆角美化*/box-sizing: border-box;/*这样可以确保浏览器呈现出带有指定宽度和高度的输入框是把边框和内边距一起计算进去的*/}

这里注意使用了属性选择器input[type=text]，这表明选中了输入文本型的输入框。同理可以总结出：
input[type=text] - 选取文本输入框
input[type=password] - 选择密码的输入框
input[type=number] - 选择数字的输入框
input[type=submit] - 选中提交的输入框（这个算是按钮了）
效果如下图所示：
接下来在CSS代码段输入以下内容，修饰提交按钮：

input[type=submit] {width: 100%;/**宽度占据整个屏幕/background-color: #4CAF50;/*背景颜色设置成绿色*/color: white;/*文字颜色设置成白色*/padding: 14px 20px;/*适当填充，增加按钮区域的面积*/margin: 10px 5px;/*适当填充，调整此按钮与其他组件的间距*/border: none;/*无外加边框*/border-radius: 4px;/*边框的直角改为圆角*/cursor: pointer;/*鼠标移到按钮上改变鼠标指针形状（变成手型）*/}

效果如下图：
最后在CSS中输入以下代码，最后修饰整个表单：

#border1{border-style: solid;/*在整个表单外侧添加黑色边框*/background-color: antiquewhite;/*表单的背景设置为烟灰色*/padding: 20px 10px;/*适当填充，增加背景的面积*/border-radius: 5px;/*背景边框改为圆角*/}

最后结果如上图所示，一个简易的表单就完成了。
全部代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<style type="text/css">input[type=text], select {width: 100%;padding: 10px 5px;margin: 15px 5px;display: block;border: 1px solid #ccc;border-radius: 5px;box-sizing: border-box;}input[type=submit] {width: 100%;background-color: #4CAF50;color: white;padding: 14px 20px;margin: 10px 5px;border: none;border-radius: 4px;cursor: pointer;}#border1{border-style: solid;background-color: antiquewhite;padding: 20px 10px;border-radius: 5px;}
</style>
</head><body><div id="border1"><form><label for="fname">First Name</label><input type="text" id="fname" name="firstname" placeholder="Your first name..."><label for="lname">First Name</label><input type="text" id="lname" name="lastname" placeholder="Your last name..."><label for="country">Country</label><select id="country" name="country"><option value="china">China</option><option value="russia">Russia</option><option value="usa">USA</option></select><input type="submit" value="Submit"> </form></div>
</body>
</html>

HTML5+CSS3构建简易的表单相关推荐

请使用recaptcha_如何在30分钟内使用ReCaptcha和PHP构建Bootstrap电子邮件表单
请使用recaptcha by Ondrej Svestka 通过Ondrej Svestka 如何在30分钟内使用ReCaptcha和PHP构建Bootstrap电子邮件表单 (How to bui ...
html5简介的文本框,HTML5实战与剖析之表单——文本框脚本
文本框类型在编写表单相关的东西的时候,通常有两个标签标示文本框:一种是单行文本框input标签,另一种是多行文本框textarea标签.这两种标签比较相似,但是他们也有区别. 如果一定要用input ...
[html] HTML5中新添加的表单属性有哪些？
[html] HTML5中新添加的表单属性有哪些? 用的最多的就是一个 placeholder 属性了,其他的基本都不知道,借机学习下 HTML5 表单属性,学完之后感觉我们很多自定义表单可以不用做了 ...
使用HTML5 FormData轻松完成Ajax表单提交
在我们的日常开发中,经常都会用到Ajax来提交表单.让我们来看一个典型的例子: <form id="myform" action="webservice.php&q ...
PHP结合HTML5使用FormData对象提交表单及上传图片
FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台.在使用Ajax提交时,使用FormData对象可以减少拼接queryString的 ...
php form 上传_php+html5使用FormData对象提交表单及上传图片的方法
本文实例讲述了php+html5使用FormData对象提交表单及上传图片的方法.分享给大家供大家参考.具体分析如下: FormData 对象,可以把form中所有表单元素的name与value组成一 ...
使用 @mention 功能构建 React 评论表单
@mention在引入功能之前,对线程和消息的评论曾经非常混乱.尽管您可以在线程中发送消息,但通常无法知道该消息是针对谁的,并且无法吸引那些尚未参与对话的人. 通过的介绍@mention,您可以提及 ...
html表单模板属性,HTML5超酷响应式表单美化模板插件
这是一款非常效果非常酷的HTML5超酷响应式表单美化效果插件.表单的整体效果使用扁平化风格,使用media queries来为各种屏幕创建响应式效果.在大屏幕上,整个表单分三列显示,当屏幕小到一定程度 ...
HTML5+CSS3构建同页面表单间的动画切换
[CSDN编译]导读:有开发者表示,HTML5将给个人开发者带来更多机遇.下面的稿件详细描述了一个唯美的动画效果,它实现了在同一个页面中进行登录表单和注册表单的转换.这些效果,完全由HTML5和CSS ...

HTML5+CSS3构建简易的表单

HTML5+CSS3构建简易的表单相关推荐

最新文章

热门文章