首页 > 代码库 > 如何创建XHTML表单

如何创建XHTML表单

首先奉上本菜曾经的作业——一张模仿智联招聘中的注册表单。虽然没有加样式显得很难看,但表单的基本要素已经具备了。

 

接下来进入正文,开始介绍各表单元素

form标签:

在创建表单时,第一步就是form标签。之后在form里添加各种你想要的表单元素。虽说不用form一样可以创建一个可以看的表单,但之后涉及到提交数据时就必须要用到form了。

method为提前方式,有getpost两种,相比之下post更安全可靠,因为get方式会将用户填写的信息附在访问地址之后,具体原因之后的博文会更详细的阐述。

 

 文本输入框:

其中:type为设置类型,placeholder为设置提示信息,size设置长度(也可用css对其样式进行更细致的修改)。

效果:

 

密码输入框:

与文本输入框类似,只不过type类型变成password,区别在于当在密码输入框中输入时,输入内容将被隐藏。

效果:

 

单选框

单选框输入类型为radio,这里input标签用label标签包起来了,这是为了给后面加上“男”“女”等字样。要想让两个单选框一次只能选中一个,需要让两个input标签里的name属性一致,checked属性是设置其所在的单选框为默认选中。

效果:

 

复选框:

复选框类型为checkbox,这里用lable标签包起来同样是为了在之后加上字样。checked属性同上。

效果:

 

下拉框:

这里和之前不同了,不再使用input标签,而是select标签下包裹了option标签,在option标签里填写可选的内容,设置value属性是为了之后具体操作数据,这里先不做解释。

效果:

 

多行文本输入框:

textarea标签,可以通过行数rows,列数cols来设置宽高,也可以用css对样式进行更细致的更改。

效果:

 

按钮:

 

三种不同的按钮属性

也可以写为:

button中添加onclick属性之后调用javascript函数来操作网页,这个我们之后再聊。

注:作为一个前端学习者,按钮应该是我们需要重视的对象。浏览器自带的按钮样式并不好看,如何做出更好看,更炫酷的按钮之后的博文我会和大家一起分享。

 

一个提升用户体验的小技巧:

许多用户在注册时我相信都是有些急躁的心理(怎么这么多要填的!!),我们希望用户在点击左边诸如“用户名”,“密码”之类的文字时也能激活右边相应的控件。

做法如下:

 

给左边的文字标签加一for属性,让for属性中的值与右边输入控件的id值一致即可。这样就可以让用户在匆忙中不至于因为点击失误增加多余的恼火:)

 

感谢您的浏览,希望能帮到您。