zoukankan      html  css  js  c++  java
  • HTML表单

    1.现在大多数网站的注册、登陆页面都是填写表单(Form)的形式,当用户输入了有效信息后,表单中的数据就通过HTTP协议传给后台的Web服务器,随后服务器再传回相应的信息,从而实现用户的注册与登陆过程。那么HTML表单的结构与常用属性有哪些呢?下面是笔者的一些认知:

    (1)表单的基本结构

    <html>

      <head>

      <title>标题描述文本</title>

      </head>

      <body>

        <form id="" name="" action="" method="">

        <!--表单输入控件--!>

        </form>

      </body>

    </html>

    (2)表单的常见属性及元素

    action属性与method属性。
    action属性定义一个URL,来指示表单(form)里的数据应该被发送到哪里处理。通常是一个服务器程序。
    method属性的值有两个:
    (1)GET
    GET方式将表单中的数据与实际的URL一起显示在浏览器的地址栏,对于一些隐私性高的数据,这样的方式容易泄露,不安全。如下截图,制作的一个简单的表单,采用GET方法提交数据到服务器,用户在填写完相应数据点击提交后,URL地址栏会将用户填写的信息都显示出来。

    (2 )POST方法

    对于POST方法,用一个形象的比喻来说就是:GET方法是开在地面上的公交,二POST则是在地下运行的地铁,而且对于用户来说,这个地铁是不可见的。此外,GET方法对于图片上传是有大小限制的,许多网站在要求用户上传相应图片时都有做大小限制,原因之一也许就在这,二POST方法不会有大小限制。

    (3)表单中的控件

    表单中最常见的控件就是输入控件了。包括文本框(type="text")、密码框(type="password")、单选框(type="radio")、复选框(type="checkbox")、上传控件(type="file")、提交按钮(type="submit"/ type="image" src="url")、重置按钮(type="reset")、命令按钮(type="button")、下拉列表(<select><option>选项</option></select>)等。

    要注意的是,对于单选按钮来说,要想实现单选功能,必须要把同类单选按钮的name属性设定为同一个值,ID属性值不能相同。

    如下代码:

    <fieldset>
    <legend>性别</legend>
    <input type="radio" name="gender" value="male">男</input>
    <input type="radio" name="gender" value="male">女</input>

    </fieldset>

    而对于下拉框的设置,除了上述提到的select与option的搭配之外。HTML5还提供了新的表单元素datalist。

    写法如下:

    <input type="text" list="list1"/>
    <datalist id="list1">
    <option value="湖南">湖南</option>
    <option value="湖北">湖北</option>
    <option value="广州">广州</option>
    </datalist>

    这种写法的好处在于:用户不仅可以选择,同时也可以自主输入信息。

    以上就是我个人关于表单的一些见解,如有不足之处,请大家指出,也欢迎大家交流,谢谢。

  • 相关阅读:
    KDD 2018 | 最佳论文:首个面向Facebook、arXiv网络图类的对抗攻击研究
    Distill详述「可微图像参数化」:神经网络可视化和风格迁移利器!
    T1330 最少步数(#Ⅱ- 8)(广度优先搜索)
    细胞个数题解(广度优先搜索)
    DRL前沿之:Benchmarking Deep Reinforcement Learning for Continuous Control
    DRL 教程 | 如何保持运动小车上的旗杆屹立不倒?TensorFlow利用A3C算法训练智能体玩CartPole游戏
    强化学习是如何解决问题的?
    深度强化学习泡沫及路在何方?
    ECCV 2018 | UBC&腾讯AI Lab提出首个模块化GAN架构,搞定任意图像PS组合
    纵览神经架构搜索方法
  • 原文地址:https://www.cnblogs.com/Ricky-Huang/p/4824877.html
Copyright © 2011-2022 走看看