zoukankan      html  css  js  c++  java
  • 如何创建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值一致即可。这样就可以让用户在匆忙中不至于因为点击失误增加多余的恼火:)

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

  • 相关阅读:
    linux读写锁
    轻量级过程改进之需求开发
    Hibernate4.3.6 Final+Spring3.0.5配置出错提示及解决方法
    hdu1198Farm Irrigation(dfs找联通)
    ushare编译之 ‘struct sockaddr_storage’ has no member named ‘s_addr’
    iOS的URLScheme
    Python学习笔记(一)
    un-资源-开源-WebGallery:Windows Web App Gallery
    几何-莱罗三角形:百科
    几何-正十七边形:百科
  • 原文地址:https://www.cnblogs.com/ghost-xyx/p/3764976.html
Copyright © 2011-2022 走看看