如何创建XHTML表单

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

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

form标签:

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

method为提交方式，有get和post两种，相比之下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值一致即可。这样就可以让用户在匆忙中不至于因为点击失误增加多余的恼火:）

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