• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > 简单介绍一下html网页的表单元素

    简单介绍一下html网页的表单元素

    作者: 分类:HTML5与CSS3.0 点击: 100 次
    wordpress CMS主题:ssmay主题

      表单的目的是获取用户的信息,然后处理信息并返回给用户结果,比如百度搜索,登录表单,或者保存用户的信息到数据库中,比如注册表单,发表日志,评论别人的文章等。

      一、表单的结构

      1、必须有表单的标签<form></form>,把所有可以输入信息的控件包含在表单的标签里面。

      2、要有用户能够输入或者选择信息的控件。

      3、必须有一个提交按钮,把数据发送到服务器端,或返回用户结果,或存放在数据库中。

      比如一个最简单的搜索表单的结构如下:

      <formname="search" id="search" method="post" action="result.php">
          <inputtype="text" name="keywords" id="keywords" placeholder="请输入关键字" required>
          <inputtype="submit" id="btn_submit" name="tijiao" value="搜索">
      </form>

      首先认识form表单,method代表发送数据的方式,默认是post,还有一种是get,如果是get,表单的数据会显示在地址栏上,成为查询字符串,很不安全。action是表单处理页面,也就是连接数据库,查询关键字,返回用户结果的处理页面,一般是动态程序,比如php,asp.net,asp,jsp等页面。

      input是表单的一种控件,可以让用户输入或者选择数据。最核心的是type属性,确定该控件是什么类型的控件,比如是单行文本、单选、多选还是密码等类型。placeholder是html5新增的属性,表示提示信息,required是一种布尔值属性,表示该控件不能为空。

      一个表单必须对应一个提交按钮,也就是type="submit"的按钮。这种按钮才具备提交数据,发送数据的能力。按钮还有两种类型,一种是button,一般和javascript结合,完成交互行为,还有一种是reset,重置表单为初始状态,貌似很无用。

      type=""这里的type类型里面的值是固定的,比如text表示单行文本,password表示密码类型,radio表示单选按钮,这种值是不能随便乱写的。

      而input的id和name表示控件的名字,是可以自己命名的,按照命名规则命就可以了。

      控件一般对应到一个label标签,它的目的是当点击label标签的文字时,光标可以放入对应的控件中,可以提高用户体验。比如:

      <labelfor="yanse">颜色:</label>
          <inputtype="color" name="yanse"  id="yanse" />

      如果是用户输入信息的控件,可以不要value属性,但是如果是选择性控件,则要加上value属性,因为传递给服务器的值是value对应的值,而不是你看见的文字。比如:

      <p>性别:
          <input type="radio" name="sex"  id="sex1" value="男" />男
          <input type="radio" name="sex"  id="sex2" value="女" />女
      </p>

      二、控件类型

      表单常用控件主要有三种:input(输入)、select(下拉)、textarea(多行文本),只有input具有很多的type类型。

      这里罗列出常用的type类型:

      type="text"                  /*单行文本*/
      type="password"              /*密码类型*/
      type="email"                 /*邮件类型*/
      type="url"                   /*网址类型*/
      type="range"                 /*范围*/
      type="date"                  /*利用万年历选择日期*/
      type="time"                  /*时间*/
      type="week"                  /*周数和日期*/
      type="datetime-local"        /*本地日期时间*/
      type="number"                /*数量*/
      type="color"                 /*颜色*/
      type="radio"                 /*单选*/
      type="checkbox"              /*复选*/
      type="file"                  /*文件域,选择本地文件*/
      type="image"                 /*图像域,可以用一张图片代替提交按钮*/

      其次,select表示下拉菜单,比如:

      <select name="address">
          <option value="四川">四川</option>
          <option value="北京">北京</option>
          <option value="上海">上海</option>
          <option value="深圳">深圳</option>
      </select>

      select必须和option组合在一起,option代表的是下拉菜单的选项。

      最后,是多行文本,比如用来简单评论的多行文本框。

      <p><label for="info">简介:</label>
          <textarea name="info" cols="50" rows="5" id="info" placeholder="请输入个人简介"></textarea>
      </p>


      QQ二维码

    文章作者:andy
    本文地址:http://wanlimm.com/77201809257001.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.