HTML表单设计

1. 表单标记

<form>...</form>。表单提交时的内容就是<form>表单中的内容。

  • 基本格式

    <form action="服务器端地址(接受表单内容的地址)" name="表单名称" method="post|get"> ...</form>

    • 常用属性

      1. name (表单名称)

      2. method(传送数据的方式,分为post和get)

        • get

          暴露在url中,不具备保密性,长度限制为8192字符。

        • post

          将表单中的数据一并包含在表单主体中,一起传送到服务器中处理,没有大小限制。

      3. action

        表单数据的处理程序的url地址,如果为空则使用当前文档的url地址,如果不需要该属性则指定为no

      4. enctype (编码方式)

      5. �target (指定目标窗口)

2. 文本域和密码

<input>标记

  • 基本语法

      `<input type="" name="" value="" size="" maxlength="">`
    
    • 属性介绍

      1. type

        type有两个值:1.text(文本输入域)和2.password(密码输入域)

      2. name

        控件的名称

      3. value

        初始化值,打开浏览器时,文本框中的内容。

      4. size

        控件长度

      5. maxlength

        最大输入字数

3. 提交、重置、普通按钮

  1. 提交按钮 (<input type="submit">)
  2. 重置按钮 (<input type="reset">)
  3. 普通按钮 (<input type="button">)

4. 单选框和复选框

  • <input type="radio">时,为单选框
  • <input type="checkbox">时,为复选框

注意: 单选框和复选框都可以使用"checked"属性来设置默认选中项。

5. 隐藏域

<input type="hidden">时,为隐藏表单域。

6. 多行文本域

  • 语法格式:

    <textarea name="name" rows="value" cols="value" value="value">... ...</textarea>

  • rows属性和cols属性分别来指定显示的行数和列数,单位是字符个数。

7. 菜单下拉列表域

  • 语法格式:

    <select name="name" size="value" multiple>
    <option value="value" selected>选项1</option>
    <option value="value">选项2</option>
    <option value="value">选项3</option>
    ...
    </select>
    
  • option标记

    用来标记用来指定列表中的一个选项,需要放在<select></select>之间。

    1. value

      给选项赋值,指定传送到服务器上面的值

    2. selected

      指定默认的选项。(单选情况下没有时,默认选中第一个)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 最初的一个应用,就是分担服务器处理表单的责任,打破处处依赖服务器的局面。   尽管目前的...
    霜天晓阅读 687评论 0 3
  • 表单表单是用来提交资料、意见,规范流程执行过程的格式。在网页中主要负责数据采集功能。表单标签:这里面包含了处理表单...
    思思有礼阅读 841评论 0 0
  • 这个序可能会有些长 先作个自我介绍,我是一名交互设计师,90后。我并不怎么喜欢编辑文章或写点什么,就是因为懒,所以...
    IxDKN阅读 11,123评论 16 160
  • 什么是FORM表单: 表单是用来提交资料、意见,规范流程执行过程的格式。表单在网页中主要负责数据采集功能。一个表单...
    PYFang阅读 1,160评论 0 0
  • 主讲/ 边义 大家晚上好,今天继续由我为大家讲解修辞手法。 第三节 通感和博喻 一、通感 通感修辞格又叫移觉,...
    舞蝶儿阅读 2,236评论 0 4