精华内容
下载资源
问答
  • HTML:表单之插入表单对象

    千次阅读 2020-01-15 23:46:08
    文本框是一种让访问者自己输入内容的表单对象,如姓名、地址等。 语法: <input name="控件名称" type="text" value="字段默认值" size="控件的长度" maxlength="最长字符数"> 参数定义如下: type:用来...

    表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等, 用于采集用户的输入或选择的数据。

    1.文本框

    文本框是一种让访问者自己输入内容的表单对象,如姓名、地址等。
    语法:

    <input name="控件名称" type="text" value="字段默认值" size="控件的长度" maxlength="最长字符数">
    

    参数定义如下:

    • type:用来指定插入哪种表单元素;
    • name:文字字段的名称;
    • value:用来定义文本框的默认值;
    • size:以字符为单位用来确认文本框在页面中显示的长度;
    • maxlength:用来设定文本框中最多可以输入的字符数。

    2.密码域

    密码是一种特殊的文字字段,其属性是和文字字段相同的,不同的是密码在输入时字符会以“ * ”显示,以确保账户安全。
    语法:

    <input name="控件名称" type="password" value="字段默认值" size="控件的长度" maxlength="最长字符数">
    

    3.普通按钮

    button一般情况下需要配合脚本进行表单处理。
    语法:

    <input name="按钮名称" type="button" value="按钮上显示的文字" onclick="处理程序">
    

    注:在button中添加onclick是为了实现一些特殊的功能,比如上述代码中的关闭浏览器的功能,此功能也可以根据需求添加效果。

    4.单选按钮

    单选按钮是一个小圆形的按钮,可供用户选择一个选项。
    语法:

    <input name="按钮名称" type="radio" value="按钮上显示的文字" checked/>
    

    5.复选按钮

    复选框checkbox可以让用户从一个选项列表中选择多项。
    语法:

    <input name="复选框名称" type="checkbox" value="复选框的值" checked/>
    

    6.提交按钮

    提交按钮在一个表单中起着至关重要的作用,其可以实现把用户在表单中填写的内容进行提交。
    语法:

    <input name="按钮名称" type="submit" value="按钮名称"/>
    

    7.重置按钮

    重置按钮的作用是用来清除用户在页面上输入的信息,如果用户在页面上输入的信息错误过多就可以使用重置按钮了。
    语法:

    <input name="按钮名称" type="reset" value="按钮名称"/>
    

    8.图像按钮

    可以为按钮添加图像的效果,使按钮变得不单调。
    语法:

    <input name="按钮名称" type="image" size="控件长度" maxlength="最长字符数"/>
    

    9 .文件域

    可以为表单添加图片或者上传文件。
    语法:

    <input name="名称" type="file" src="图像路径"/>
    

    10.菜单和列表

    下拉菜单在正常状态下只显示一个选项,因此在页面中是非常节省空间的。
    语法:

    <select name="下拉菜单名称">
    <option value="选项值" selected>下拉菜单内容
    ...
    </select>
    

    注:网页中只显示一个选项,其他的选项需要点击后面的下拉按钮才能看到。下拉菜单的宽度是由最长选项的宽度决定的。

    11.使用label定义标签

    此标签用于在表单元素中定义标签,这些标签可以对其他一些表单控件元素(如单行文本框、密码框等)进行说明。
    它可以指定id、style、class等核心属性,也可以指定onclick等事件属性。除此以外,它还有一个for属性,该属性指定它与哪个表单控件相关联。
    虽然它定义的标记只是输出普通文本,但是它生成的标记还有一个另外的作用,那就是当用户单击它生成的标签时,和该标签相关联的表单控件元素就会获得焦点。也就是说,当用户选择它所生成的标签时,浏览器会自动将焦点转移到和该标签相关联的表单控件元素中。
    使标签和表单控件相关联主要有两种方式:

    • 隐式关联:使用for属性,指定此标签的for属性值为所关联的表单控件的id属性值。
    • 显式关联:将普通文本、表单控件一起放在此标签内部即可。
      语法:
    <label>...</lable>
    

    12.文本域

    文本域标签定义多行的文本输入控件。文本区中可容纳无限数量的文本,其中文本的默认字体是等宽字体。可以通过rows(文字域行数)和cols(文字域列数)属性来规定textarea的尺寸。
    语法:

    <textarea name="名称" rows="行数" cols="列数" wrap="换行方式">文本内容</textarea>
    
    展开全文
  • 表单对象

    2013-07-18 16:14:01
    表单对象 8.1表单的对象和方法 基础 访问表单对象 表名、下标、下标以名形式表示 访问表单元素 下标、元素名 属性、方法和事件 属性、方法和事件 功能说明 name 表示...

    表单对象



    8.1表单的对象和方法

    基础

    访问表单对象

    表名、下标、下标以名形式表示

    访问表单元素

    下标、元素名

    属性、方法和事件

    属性、方法和事件

    功能说明

    name

    表示表单的名称

    length

    表示表单中元素的数目

    action

    表示表单提交时执行的动作,通常是一个服务器端脚本的URL

    element

    表示表单中所有控件元素的数组,数组的下标就是控件元素在HTML源文件中的序号

    encoding

    表示表单数据的编码类型

    method

    表示发送表单的HTTP方法,取值为get或post

    target

    表示用来显示表单结果的目标窗口或框架,取值可以是_self、_parent、_top或_blank

    reset()

    将所有表单控件元素的值重新设置为它们的默认值,相当于单击表单中的“重置”按钮

    submit()

    提交表单,相当于单击表单中的“提交”按钮

    onReset()

    单击“重置”按钮时触发

    onSubmit()

    单击“提交”按钮时触发

     

    8.2表单的基本元素

    文本型表单对象

     

    属性、方法和事件

    功能说明

    name

    表示对象的名称

    value

    表示对象的值

    defaultvalue

    表示对象默认的value属性,FileUpload对象无此属性

    type

    表示对象的类型

    form

    表示对象所在的表单

    blur()

    将焦点从对象上移走

    focus()

    将焦点移动到对象上

    select()

    选中对象中的文本

    onBlur

    当将焦点从对象上移开时触发

    onFocus

    当将焦点移动到对象上时触发

    onChange

    当对象的值改变时触发

    onSelect

    当选中对象的值时触发

     

    按钮型表单对象

    属性、方法和事件

    功能说明

    name

    表示对象的名称

    value

    表示对象的值

    type

    表示对象的类型

    form

    表示对象所在的表单

    blur

    将焦点从对象上移走

    focus()

    将焦点移动到对象上

    click()

    相当于单击对象

    onBlur

    当将焦点从对象上移开时触发

    onFocus

    当将焦点移动到对象上时触发

    onClick

    当单击按钮时触发

     

    单选型和复选型

    属性、方法和事件

    功能说明

    name

    表示对象的名称

    value

    表示对象的值

    defaultChecked

    表示对象在初始状态时是否被选中,取值为true或false,如果在INPUT标记符中有checked属性,则其值为true,否则为false

    checked

    表示对象是否被选中,取值为true或false

    type

    表示对象的类型

    form

    表示对象所在的表单

    blur()

    将焦点从对象上移走

    focus()

    将焦点移动到对象上

    click()

    单击表单框或复选框

    onBlur

    当将焦点从对象上移开时触发

    onFocus

    当将焦点移动到对象上时触发

    onClick

    单击单选框或复选框时触发

     

    属性、方法和事件

    功能说明

    name

    表示对象的名称

    type

    表示对象的类型

    form

    表示对象所在的表单

    length

    表示选项菜单中选项的数目

    options

    表示选项菜单中各选项的数组

    selectedIndex

    表示选项菜单中被选项的索引

    blur()

    将焦点从对象上移走

    focus()

    将焦点移动到对象上

    onBlur()

    当将焦点从对象上移开时触发

    onFocus

    当将焦点移动到对象上时触发

     

    列表项对象

    8.3 hidden对象和cookie

    hideen对象

    cookie对象:用cookie可以保存多项信息,每一项信息都按如下格式组成:信息名称=信息内容

    展开全文
  • 表单使我们能够有组织的,使用同一方式的从使用者那里收集资料,因此在设计网站时总是属于"任何状况都能拿来用"的那一类,举例来说,我们发现大概有10000种标记表单的不同方式.好吧,或许没有那么多,但是我们仍能思考几种...

    互动性一直是互联网的重点,让使用者与网站能够交换信息,彼此沟通.表单使我们能够有组织的,使用同一方式的从使用者那里收集资料,因此在设计网站时总是属于"任何状况都能拿来用"的那一类,举例来说,我们发现大概有10000种标记表单的不同方式.好吧,或许没有那么多,但是我们仍能思考几种状况,让使用者易于使用表单结构,同时也便于让网站所有者进行管理。

     

    记表单的方法

    方法A:使用表格

     

    <form action="/path/to/script" method="post">

     

      <table>

        <tr>

          <th>Name:</th>

          <td><input type="text" name="name" /></td>

        </tr>

        <tr>

          <th>Email:</th>

          <td><input type="text" name="email" /></td>

        </tr>

        <tr>

          <th>&nbsp;</th>

          <td><input type="submit" value="submit" /></td>

        </tr>

      </table>

    </form>

     

    长久以来许多人都以表格来标记表单,由于使用频率很高的缘故,我们已经习惯于见到表单以这种方式进行排版:左列是向右对齐的文字说明,右列则是相左对齐的表单元素.使用单纯的两列表格,是完成易用表单排版的简单方法之一.

    有些人认为不需要表格,也有其他人认为应该把表单视为表状资料.我们不打算支持任何一种说法,但是在某些情况下,使用表格时达成特定表单排版的最佳方法,特别是包含许多种不同元素的复杂表单(使用了单选框,下拉选框等等的表单).完全依赖CSS处理这种表单的排版可能会让人感到挫折,而且经常需要加上额外的<span>与<div>,会比表格耗上更多的标签.

    接着看图5-1,这是一般可视化浏览器显示方法A的效果:

    HTML标记语言——表单的详细使用说明 - 创狼 - 狼人的博客

    图5-1:浏览器显示的方法A的效果

    你会发现,使用表格可以把文字说明表单元素排列的十分整齐.然而,对这样简单的表单来说,或许我会避免选择使用表格,并且换用其他不需要使用这么多标签的方法.除非表单的视觉设计十分需要这种排版,否者未必需要使用表格.同时我们也要考虑几个易用性问题,在研究下面两个方法的时候,我们就会接触到这个部分.

    方法B:不用表格,但挤在一起

     

    <form action="/path/to/script" method="post">

     

      <p>

        Name: <input type="text" name="name" /><br />

        Email: <input type="text" name="email" /><br />

        <input type="submit" value="submit" />

      </p>

    </form>

     

    使用单一段落和几个<br />标签隔开所有元素是个可行方法,但视觉上可能会被描绘的有点挤.图5-2十一版浏览器的显示效果:

    HTML标记语言——表单的详细使用说明 - 创狼 - 狼人的博客

    图5-2:浏览器显示方法B的效果

    虽然我们不用表格就能完成排版,但是它看起来有点挤,有点丑.同时我们也遇上表单元素无法完美对齐的问题.

    我们能够以CSS为<input>元素加上一个外补丁,以便减轻拥挤的感觉.像是这样:

     

    input{

     

        margin:6px 0;

    }

     

    前面这段为每个<input>元素的上下分别加上6像素的外补丁(包含了Name,Email的输入框,以及submit按钮),在元素之间加上额外的空间.就像图5-3一样:

    HTML标记语言——表单的详细使用说明 - 创狼 - 狼人的博客

    图5-3.方法B在为input元素加上外补丁之后的效果

    方法B本身没什么大问题,但是还能进行一些微调,以便把表单做得更好.方法C里头也运用了这些微调技巧,所以一起来看看吧.

    方法C:朴素,更容易使用

     

    <form action="/path/to/script" id="thisform" method="post">

     

      <p><label for="name">Name:</label><br />

      <input type="text" id="name" name="name" /></p>

      <p><label for="email">Email:</label><br />

      <input type="text" id="email" name="email" /></p>

      <p><input type="submit" value="submit" /></p>

    </form>

     

    我喜欢方法C的几个地方.首先,对于类似本示例的单纯表单来说,我发现把每个说明与表单元素放在单独的段落比较方便,不加上样式显示时,段落之间的预设距离应该足以让你轻松阅读内容.稍后我们还能以CSS为表单内包含的<p>标签设定间隔.

    我们甚至更进一步,为表单设定了唯一的id="thisform".因此,刚才我提到的精确间隔大致上可以写成这样:

     

    #thisform p{

     

    margin:6px 0;

    }

     

    这代表将这个表单内的<p>标签的上下外补丁设定为6个像素,覆盖浏览器为一般段落选用的预设值.

    方法C与前两种方法的另一个不同之处在于:尽管每个群组(说明和输入框)都放在<p>里头,我们仍以<br />把他们放在独立的一行.使用<br />分开每个元素,就能绕过文字长短不一,造成输入项无法完美对齐的问题.

    图5-4是一般浏览器显示方法C的效果,这边有使用先前为<p>标签设定的样式.

    HTML标记语言——表单的详细使用说明 - 创狼 - 狼人的博客

    图5-4.浏览器显示方法C的效果,有对P标签使用CSS

    除了方法C的视觉效果之外,最重要的优点:也就是提升易用性的部分.

    <label>标签

    使用<label>标签提升表单的易用性需要两个步骤,而方法C已经完成这两个步骤了.首先是以<label>将文字说明与相关的表单元素连接在一起,不管是文字输入框(text field),文字区块输入框(text area),单选框(radio),多选框(checkbox)等等都好.方法C在"Name:"与"Email:"标题上使用了<label>标签,把它们与输入资料的元素连接在一起.

    第二步则是为<label>标签加上for属性,填上对应输入框的id.

    举例来说.在方法C里面,以<label>标签把"Name:"包了起来,并且在for属性里填入与其后面的输入框id相同的值.

     

    <form action="/path/to/script" id="thisform" method="post">

     

      <p><label for="name">Name:</label> <br />

      <input type="text" id="name" name="name" /></p>

      <p><label for="email">Email:</label><br />

      <input type="text" id="email" name="email" /></p>

      <p><input type="submit" value="submit" /></p>

    </form>

     

    为什么要用<lable>?

    或许听过其他人说你应该在表单内加上<label>标签.而最重要的问题在于为什么应该要用<label>标签.

    建立label / ID的关联能让屏幕阅读器为每个表单元素读出正确的标签,而不收版面排列方法的影响,这是件好事.同时,<label>标签正是为了标记表单栏标签而生,使用这个标签的时候,我们就是在为每个元素说明意义,强化表单的结构.

    在处理单选,多选框时使用<label>标签还有个额外的好处,那就是大多数浏览器在使用者点击<label>内文字时也会改变元素的值.这样能为输入元素造成更大的点击区域,让行动不便的使用者更容易填写表单(Mark Pilgrim, "Dive Into Accessibility," http://diveintoaccessibility.org/day_28_labeling_form_elements.html).

    举例来说,如果为表单加上一个多选框,让使用者能够选择"记下这些信息",那么我们就能像这样的使用<label>标签了:

     

    <form action="/path/to/script" id="thisform" method="post">

     

      <p><label for="name">Name:</label><br />

      <input type="text" id="name" name="name" /></p>

      <p><label for="email">Email:</label><br />

      <input type="text" id="email" name="email" /></p>

      <p><input type="checkbox" id="remember" name="remember" />

      <label for="remember">Remember this info?</label></p>

      <p><input type="submit" value="submit" /></p>

    </form>

     

    借着以这种方式标记多选框,可以获得两个好处:屏幕阅读器能读出正确的说明文字(就像这个例子一样,文字出现在输入框之后也行),而且能切换多选框的范围变大了,现在切换范围除了多选框本身之外,文字部分也包含在内(大多数浏览器都支持).

    图5-5就是这个表单在浏览器中的显示效果.我们特别标示了加大之后的多选框切换范围:

    HTML标记语言——表单的详细使用说明 - 创狼 - 狼人的博客

    图5-5.把文字包含在切换范围内的多选框

    除了表单与段落之外,最后我还想展示另一个标记表单的方式,使用定义清单.

    方法D:定义一个表单

     

    <form action="/path/to/script" id="thisform" method="post">

     

      <dl>

        <dt><label for="name">Name:</label></dt>

        <dd><input type="text" id"name" name="name" /></dd>

        <dt><label for="email">Email:</label></dt>

        <dd><input type="text" id="email" name="email" /></dd>

        <dt><label for="remember">Remember this info?</label></dt>

        <dd><input type="checkbox" id="remember" name="remember" /></dd>

        <dt><input type="submit" value="submit" /></dt>

      </dl>

    </form>

     

    最后讨论的表单排版方法,是以定义清单定义每一组说明文字与输入框.这是有点争议的方法.我们在定义清单的原始设计目的的边缘游走,不过这是在近期逐渐普及的方法,同时也只得本书一提.

    本书稍后在第8章回深入讨论定义清单.事实上,它们能应用的范围远超过大多是设计师的认知:以<dl>排版表单就是个很棒的例子.

    你应该发现了这个范围里面的每组表单说明文字都放在定义名词标签<dt>之内,随后跟着放在定义描述标签<dd>中的表单元素.这么做能将说明文字与表单元素对配起来,并且在不使用任何样式时以浏览器显示的效果见图5-6:

    HTML标记语言——表单的详细使用说明 - 创狼 - 狼人的博客

    图5-6.以清单定义排版表单的显示效果

    根据预设值,大多数可视化浏览器会把<dd>缩进显示在单独一行之内.太棒了,因为这样便不必使用任何多余的<p>或<br />标签了就能让不支持CSS的浏览器显示出容易使用的表单排版效果.

    定义样式

    最简单的样式修改,大概是去掉表单内<dd>元素的预设缩进:

     

    form dd{

     

        margin:0;

    }

     

    前面这一小段css会使方法D范例显示成图5-7:

    HTML标记语言——表单的详细使用说明 - 创狼 - 狼人的博客

    图5-7. 去掉<dd>缩进效果的定义清单式表单排版

    方法A的表格效果,也能借着浮动表单内的<dt>元素达成:

     

    form dd {

     

      margin: 0;

      }

    form dt {

      float: left;

      padding-right: 10px;

      }

     

    在把<dt>元素浮动到左边之后,包含在<dd>之内的表单元素就会排列到右侧,像是图5-8这样.你应该已经发现表单元素不会完美的对齐,但这至少说明了使用<dl>标签排版表单时,并不代表必须将每个元素都单独显示在一行里.

    HTML标记语言——表单的详细使用说明 - 创狼 - 狼人的博客

    图5-8.浮动<dt>元件之后的表单排版

    事实上,由于多了<dl><dt>和<dd>元素,再加上表单内原本就具备的<label>与<input>元素,因此在设计CSS时,你拥有更多可以指定样式的对象,而发挥的空间也变大了.

    概要

    看完四种标记同一个简单表单的不同方法,同时也讨论了彼此的优缺点,要注意的是,我们为方法C与方法D加上了易用性功能,当然也可以加到头两个方法上,在得到这些改进之后,这两个方法当然也会变得更棒.

    这几个方法没有哪一个明显比其他方法要好,或者能当作"最佳解决方案".不过多知道几种方法很有价值.而你也以组合这四种方法,在你的项目里做出更棒的表单.

    方法A:

    以视觉效果来说,是个建立表单元素,说明文字的简介方式,在处理复杂,庞大的表单时尤其好用.

    然而,为了这样单纯的表单使用表格,似乎太麻烦了.

    方法B:

    简单的标记法在文字浏览器,小屏幕设备上的显示效果不错.

    以视觉效果来说,只用<br />会让排版变得太拥挤.

    方法C:

    简单的标记法在文字浏览器,小屏幕设备上显示效果不错.

    允许说明文字,表单元素的长度变化,不会有对齐的问题.

    包含重要的易用性功能(也能使用在先前的方法内).

    方法D:

    结构化标记法在文字浏览器,小屏幕设备上显示效果不错.

    包含重要的易用性功能(也能应用在先前的方法内).

    说明文字与表单元素能以CSS指定要放在同一行之内,或是分行摆放.

    当你使用方法A或方法B的时候不必感到内疚,但是学会方法C的优点,并且把它应用到先前的例子里仍然不错.

    方法C也有进步的空间,而我们也将在"技巧延伸"这个单元内看到几个我们能加上的额外功能.我们也会讨论一些简单的CSS样式.让我们把表单修饰得更吸引人.

    技巧延伸

    在这个单元中,我们会先讨论tabindex和accesskey属性,看看它们如何使表单变得更加容易浏览.我们也会研究能帮助组织表单区域的<fieldset>标签,最后,我们会看一些CSS,因为它能把表单外观修饰得更漂亮.

    神奇的tabindex:

    我们能轻易加上的功能之一是tabindex属性.加上tabindex,为它指定一个数值之后,使用者就能以键盘切换正在使用的表单元素(通常是Tab键).按下Tab就会依照我们所制定的顺序跳到下一个表单元素.根据预设值,每个能互动的元素都隐含有tabindex,但使用tabindex能收回浏览器指派的顺序,让你完全掌握控制权.

    举例来说,让我们为先前的示例(方法C)里面的表单元素加上tabindex属性:

     

    <form action="/path/to/script" id="thisform" method="post">

     

      <p><label for="name">Name:</label><br />

      <input type="text" id="name" name="name" tabindex="1" /></p>

      <p><label for="email">Email:</label><br />

      <input type="text" id="email" name="email" tabindex="2" /></p>

      <p><input type="checkbox" id="remember" name="remember"  tabindex="3" />

      <label for="remember">Remember this info?</label></p>

      <p><input type="submit" value="submit" tabindex="4" /></p>

    </form>

     

    现在,当使用者在表单内切换输入框的时候,我们能确定切换的顺序与我们期望的顺序完全相同:Name,Email,Remenber this info与submit按钮.

    在设计复杂,单一行有许多输入框或者其他表单元素的表单时,使用tabindex设定切换顺序的优点就显而易见了.

    为何指定切换顺序?

    除了在我们表单上实施非常简单之外,还能再次帮助到行动受限的使用者,使其能完全以键盘浏览表单内容.他们不需要抓起鼠标点击每个部分,只需要用Tab键就能依照正确的顺序遍历每个表单元素.请为那些无法同时使用双手浏览网页的人想想,这真的很有帮助.

    为频繁使用的表单指定快捷键

    与tabindex类似的.accesskey属性是另一个容易加上的功能,不仅能帮助行动受限的使用者,对其他人来说也是方便极了.

    举例来说,如果为表单内包围着Name:的<label>标签上加上accesskey属性,那么在使用者按下指定的按键时,光标就会自动跳到与说明文字相关的输入框.

    我们来看看达成这个效果所需要的代码:

     

    <form action="/path/to/script" id="thisform" method="post">

     

      <p><label for="name" accesskey="9" >Name:</label><br />

      <input type="text" id="name" name="name" tabindex="1" /></p>

      <p><label for="email">Email:</label><br />

      <input type="text" id="email" name="email" tabindex="2" /></p>

      <p><input type="checkbox" id="remember" name="remember"  tabindex="3" />

      <label for="remember">Remember this info?</label></p>

      <p><input type="submit" value="submit" tabindex="4" /></p>

    </form>

     

    使用者必须在按下9这个按键的时候同时按下Alt或Ctrl键,根据系统而定,之后光标就会立刻移到Name:的输入框里头.

    容易使用的搜索框

    在设计会经常使用的表单时(比如搜索框,用户登录等等),加上accesskey属性格外有用,使用者不必伸手去拿鼠标,就能使用键盘立刻切换到适合的位置,开始进行输入.

    有件事必须留意,虽然不是所有浏览器都支持accesskey,但是加上这个属性对支持的浏览器使用这很有帮助,举例来说,要是我们加上accesskey="9"的搜索位置时,windows使用者可以按Alt+9,而Mac使用者则能以Command+9直接切换到搜索输入框内了.

    为表单加上样式

    现在有了结构完善的表单,接着让我们研究一些能够用来自定显示效果的CSS技巧吧!

    设定文字输入框的宽度:

    处理表单元素需要技巧,因为它们的宽度,高度与浏览器种类有关.在表单示例中,我们没有指定文字输入框的宽度,让浏览器自动使用预设值,一般来说,设计者或许会以size属性为<input>元素指定宽度,像这样:

     

    <input type="text" id="name" name="name" tabindex="1" size="20" />

     

    把大小指定为20代表将文字输入框的宽度设置为20字元(而不是像素).根据浏览器的预设表单字体,实际的输入框像素宽度可能会有差异.这使得精确指定表单排版变得有点困难.

    如果需要的话,我们能借着CSS以像素为单位控制输入框(以及其他表单元素)的宽度.举例来说,让我们把示例表单中的所有<input>元素宽度设定成200像素,我们会利用为表单指定id属性,在这个示例中是thisform.

     

    #thisform input {

     

      width: 200px;

      }

     

    这时,所有在#thisform内的<input>元素都会变成200像素宽.图5-9是可视化浏览器的显示效果.

    HTML标记语言——表单的详细使用说明 - 创狼 - 狼人的博客

    图5-9 把所有<input>元件宽度设置成200像素之后的效果

    哦喔~多选框和submit按钮也是<input>元素,因此得到了相同的设定值,让我们改以id指定Name和Email输入框,而不是一次设定所有的<input>元素的宽度:

     

    #name, #email {

     

      width: 200px;

      }

     

    图5-10是以浏览器检查修正后成果的效果,这时只有两个文字输入框是200像素宽的了.

    HTML标记语言——表单的详细使用说明 - 创狼 - 狼人的博客

    图5-10.只有文字输入框是200像素宽的效果

    使用<label>自定字体:

    我们有几种不同的方法能够调整表单内文字的大小,字体与色彩,我们再度奉行"利用你使用的标签"哲学,直接以<label>元素为文字设定样式.

    我喜欢以<label>元素指定文字样式,主要是因为,在不少情况下,我们都会希望为说明文字指定独特的样式,使它们容易与表单内可能出现的其他文字区分开来,举例来说,我们可以为表单内的所有段落标签制定独特的样式:

     

    #thisform p {

     

      font-family: Verdana, sans-serif;

      font-size: 12px;

      font-weight: bold;

      color: #66000;

      }

     

    这会使表单内的所有段落文字使用粗糙,酒红色的Verdana 12像素大小的字体.但是同样的结果也能借着为表单内的<label>元素指定相同样式来达成,像这样:

     

    #thisform label {

     

      font-family: Verdana, sans-serif;

      font-size: 12px;

      font-weight: bold;

      color: #66000;

      }

     

    这个样式的显示效果见图5-11.

    HTML标记语言——表单的详细使用说明 - 创狼 - 狼人的博客

    图5-11.为label指定样式的效果

    为什么我比较喜欢这个方法?假设除了说明文字之外,表单还有其他放在<p>当中的指示或文字内容.那么在前一种方法内,这些文字就会使用和<p>相同的样式设定了.

    也能先为表单中的所有文字制定一种样式,接着再为<label>特别指定样式,以便做出独特的表单元素显示效果.

    使用的CSS大概类似这样:

     

    #thisform {

     

      font-family: Georgia, serif;

      font-size: 12px;

      color: #999;

      }

    #thisform label {

      font-family: Verdana, sans-serif;

      font-weight: bold;

      color: #660000;

      }

     

    不需要多余的代码

    或许你或发现,在#thisform label 的定义中没有重复font-size:12px;由于<label>元素包含在#thisform之内,因此他们会继承这个属性.在较高层级设定共享规则,接着在元素树底层覆盖有需要的设定值是个好习惯.这能节省不少代码.除了显而易见好处之外,也能让往后的维护工作轻松不少.如果你想改变整个表单的font-family,那么只需要修改一条规则,而不必修改所有重复设定字体的规则.

    想象你设计了一个网站,全部使用了Georgia字体,最初你在20个不同的规则中分别加上相同的font-face:Georgia,serif;规则,过了一星期后,老板跑来找你并且对你说"CEO现在讨厌serif字体了,把网站内容改用Verdana".这时你的钻进这20条规则里,慢慢修改了.

    或者是,你也能在更高层级设定一次这条规则,比如说指定在<body>元素里,此时整份文档都汇继承Georgia字体,除非以其他规则指定另外的设定值.现在,当老板要求你进行修改时,你就能回答"没问题,两分钟之后搞定";或者是能把简易性留给自己,告诉他这需要耗上两个小时,然后用这些额外的时间上eBay标东西.

    OK,当然,你应该告诉老板真相,他们应该知道你的价值,为公司节省时间并且善用你找到的新解法.

    以<fieldset>制作表单元素群组

    使用<fieldset>是个为表单元素分组的便利方法.除此之外,加上叙述用的<legend>则会在大多数浏览器内,为你做好的表单元素群组加上一个漂亮的边框.我刚刚有说"漂亮"吗?嗯,我的确喜欢这种边框.而我们只需要用上一点CSS,就能使它变得更加迷人.

    首先,来看看建立群组是需要哪些标签.接着为示例表单加上一个群组:

     

    <form action="/path/to/script" id="thisform" method="post">

     

      <fieldset>

        <legend>Sign In</legend>

        <p><label for="name" accesskey="9" >Name:</label><br />

        <input type="text" id="name" name="name" tabindex="1" /></p>

        <p><label for="email">Email:</label><br />

        <input type="text" id="email" name="email" tabindex="2" /></p>

        <p><input type="checkbox" id="remember" name="remember"  tabindex="3" />

        <label for="remember">Remember this info?</label></p>

        <p><input type="submit" value="submit" tabindex="4" /></p>

      </fieldset>

    </form>

     

    图5-12是浏览器显示这个群组的效果图,包含刚加上的<fieldset>与<legend>标签,以及刚为<label>设定的CSS样式.或许你已发现有条漂亮的边线围绕在<fieldset>里面的所有表单元素之外,同时<legend>的内容断开了左上方的边线.

    HTML标记语言——表单的详细使用说明 - 创狼 - 狼人的博客

    图5-12.加上<fieldset>与<legend>之后的表单

    我说这个效果"漂亮"的原因是:完全不加上CSS,使用它们的预设样式,它的显示效果的确让人相当感动.同时还能加上一些自定属性,使它变得更有趣,我们马上动手.

    你应该也能看出<fieldset>在为表单隔出不同区块的时候十分有用,举例来说,如果我们的示例是个大表单的第一部分,那么以<fieldset>从视觉上隔开这些区块的话,不仅语义更清楚,还能使表单结构更明显,更容易阅读使用.

    为<fieldset>和<legend>加上样式

    我们能使用CSS改写<fieldset>预设边框与<legend>文字的样式,与定义其他元素的样式一样简单,首先,我们来修改边框的颜色和宽度,接着再修改文字本身.

    为了使<fieldset>的边线变得更加细致,我们使用以下的CSS:

     

    #thisform {

     

      font-family: Georgia, serif;

      font-size: 12px;

      color: #999;

      }

    #thisform label {

      font-family: Verdana, sans-serif;

      font-weight: bold;

      color: #660000;

      }

    #thisform fieldset {

      border: 1px solid #ccc;

      padding: 0 20px;

      }

     

    接着为左右两边指定20像素的外补丁,并且去掉上下外补丁,为什么要去掉这些外补丁?因为我们的表单说明文字,表单元素都放在<p>标签内,因此他们在上下方向上已经留足了边界空白.

    图5-13是指定这些样式之后的表单显示效果.

    HTML标记语言——表单的详细使用说明 - 创狼 - 狼人的博客

    图5-13.为<fieldset>指定样式之后的效果

    立体的<legend>

    最后,为<legend>标签指定一些样式,做出立体的边线效果,让它看起来像是与<fieldset>元素的边线连在一起.

     

    #thisform {

     

      font-family: Georgia, serif;

      font-size: 12px;

      color: #999;

      }

    #thisform label {

      font-family: Verdana, sans-serif;

      font-weight: bold;

      color: #660000;

      }

    #thisform fieldset {

      border: 1px solid #ccc;

      padding: 0 20px;

      }

    #thisform legend {

      font-family: arial, sans-serif;

      font-weight: bold;

      font-size: 90%;

      color: #666;

      background: #eee;

      border: 1px solid #ccc;

      border-bottom-color: #999;

      border-right-color: #999;

      padding: 4px 8px;

      }

     

    如你所见,这里做了几件事,首先,调整了<legend>的字体,粗细与大小,接着产生了立体效果,把背景设为浅灰色,然后在整个<legend>的外面加上配合<fieldset>边线颜色的单像素边线,为了达成阴影效果,我们还把底部与右侧的边线颜色换成深一点的灰色.

    字体大小百分比: 由于我们之前为整个#thisform 的字体设置为font-size:12px;因此要缩小<legend>文字时,我们直接用百分比,在较高层级指定字体大小,接着在底层使用百分比,能够减轻未来的维护负担.要调大整个网站的字体大小么?只要修改一个地方,所有百分比都会随之改变.事实上,最理想的状况下,我们可以设定<body>的初始字型大小,然后在其他所有地方使用百分比.然而在这个示例中,我们选择在<form>层级指定字体大小.

    然后调整内部定,以便文字与边线之间留下一点空间.就是这样了!图5-14显示的是最后结果,加上本章内的所有CSS代码,同时仍然使用最简洁,灵活的表单结构.

    HTML标记语言——表单的详细使用说明 - 创狼 - 狼人的博客

    图5-14 完成的表单示例,以CSS设定样式.

    结论

    标记表单有许多方法,不管你使用表格,定义清单,还是最基本的段落标签进行说明,表单元素的排版,都要记住,本章讨论的易用性功能,可以轻易加到任何方法里面.

    像是tabindex与accesskey这种属性可以提升浏览效率,而<label>元素与对应的id属性能确保互助设备可以正确辨识你的表单内容.

    基于短小简介的修改,就能得到更好的结果.

    展开全文
  • HTML表单标记教程(4):

    2020-12-13 18:56:25
    于是在表单对象中出现了菜单和列表。说到底,菜单和列表主要是为了节省网页的空间而产生的。 菜单是一种最节省空间的方式,正常状态下只能看到一个选项,单击按钮打开菜单后才能看到全部的选项。列表可以显示一定...
  • JavaScript表单对象Form

    千次阅读 2012-03-12 14:39:17
    要实现动态交互,必须掌握有关表单对象(Form)和框架对象(Frames)更为复杂的知识。 1、 表单基础知识 表单是最常见的与JavaScript一起使用HTML元素之一。在网页中用表单来收集从用户那里得到的信息,并且 将这些...
    要实现动态交互,必须掌握有关表单对象(Form)和框架对象(Frames)更为复杂的知识。
    
    1、 表单基础知识
    表单是最常见的与JavaScript一起使用的HTML元素之一。在网页中用表单来收集从用户那里得到的信息,并且

    将这些信息传输给服务器来处理。表单主要有两类应用:一是如订单、个人资料、调查信息等;二是搜索引擎

    功能,即从用户那里得到查询标准,由Web浏览器送给服务器的数据库,在数据库中生成查询,再将查询结果返

    回Web浏览器。通常可以使用JavaScript代码来保证表单中输入的数据是符合标准的,也可以再数据被提交给服

    务器前,使用JavaScript代码来执行其他一些预处理。如果不使用JavaScript,HTML只能将表单中的数据传送

    给服务器。
      
    CGI:通用网关接口,一种简单的协议,允许网页与基于Web服务器的程序交互,处理从Web浏览器提交给服务器的

    数据。
    1、什么是表单对象
    表单(Form):它构成了Web页面的基本元素。通常一个Web页面有一个表单或几个表单,使用Forms[]数组来实

    现不同表单的访问。
    <form Name=Form1>
    <INPUT type=text...>
    <Input type=text...>
    <Inpup byne=text...>
    </form>
    <form Name=Form2>
    <INPUT type=text...>
    <Input type=text...>
    </form>
    在Forms[0]中共有三个基本元素,而Forms[1]中只有两个元素。
      表单对象可以使设计人员能用表单中不同的元素与客户机用户相交互,而用不着在之前首先进行数据输入

    ,就可以实现动态改变Web文档的行为。表单对象最主要的功能就是能够直接访问HTML文档中的表单,它封装

    了相关的HTML代码:
    <Form
    Name ="表单的名称"
    Target ="指定从服务器返回的数据在那里显示"
    action ="指定一个URL,表单数据将被提交给该URL"
    Method =“信息数据传送方式(get/post)”
    enctype ="被提交数据的格式"
    [onsubmit ="JavaScript代码"]>
    </Form>
      书179图6-7。
    例:”form1.html”
    2、表单对象的方法
      表单对象的方法只有一个--submit()方法,该方法主要功用就是实现表单信息的提交。如提交Mytest表单,

    则使用下列格式:
    document.mytest.submit()
     
    3、表单对象的属性
      表单对象中的属性主要包括以下:elements name action target encoding method.
      除Elements外,其它几个均反映了表单中标识中相应属性的状态,这通常是单个表单标识;而elements常

    常是多个表单元素值的数组,例:
    document.forms[0].elements[1]
    document.myform.textField
     
    4、访问表单对象
    在JavaScript中访问表单对象可由两种方法实现:
    (1)通过访问表单
      在表单对象的属性中首先必须指定其表单名,而后就可以通过下列标识访问表单如:document.myform。
    (2)通过数组来访问表单
      除了使用表单名来访问表单外,还可以使用表单对象数组来访问表单对象。但需要注意一点,因表单对象

    是由浏览器环境的提供的,而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现表单对象的访

    问:
    document.forms[0]
    document.forms[1]
    document.forms[2]...
     
    5、引用表单的先决条件
      在JavaScript中要对表单引用的条件是:必须先在页面中用标识创建表单,并将定义表单部分放在引用之

    前。
     
    二、表单中的基本元素
        表单中有三类基本元素:输入域,选择列表,多行文本域。分别用<input>/<select> /<textarea>标记来创

    建。
        <input>/<select>/<textarea>标记都可以包括name和value属性。Name属性为一个表单定义名称,value属

    性给表单定义一个默认值。当表单被提交给CGI脚本时,表单数据被提交的格式就是name=value标记对。如:

    <input type=”text” name=”地址” value=”铜陵市长江西路274号”>,则name=value标记对“地址=铜陵市

    长江西路274号”将传送给CGI脚本。要想将表单数据提交给CGI脚本,在标记中必须包含name属性,但并不要求

    必须包含value属性,也不要求在表单数据被提交前域中必须输入数据,因为空值市合法的。但是,在数据被提

    交前,最好能使用JavaScript代码验证数据的合法性。
    在JavaScript中要访问这些基本元素,必须通过对应特定的表单元素的数组下标或表单元素名来实现。每一个

    元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下:
    formName.elements[].methadName (表单名.元素名或数组.方法)
    formName.elements[].propertyName(表单名.元素名或数组.属性)
     
    (一)输入域<input>
    <input>标记用来创建各种不同类型的界面元素来收集信息的输入域。包括以下属性:
    type:指定创建何种类型的元素。其有效值包括text/password/radio/checkbox/
    reset/button/submit/image/hidden。
    Name:表单元素名称。
    Value:设置初始值。
    Src:指定一个图像的URL。
    Size:设置文本域的字符宽度。
    Maxlength:设置可以输入域中的最大字符数。
    Checked:决定一个单选按钮或一个复选框是否被选择
    Align:指定Type属性创建的图像的对齐属性。

    1、text文本框
     功能:创建一个简单的文本框,接受输入单行文本
     基本属性:
    Name:设定提交信息时的信息名称。对应于HTML文档中的Name。
    Value:用以设定出现在窗口中对应HTML文档中Value的信息。
     基本方法:
    blur():将当前焦点移到后台。
    select():加亮文字。
    focus():获得text输入焦点。
    主要事件:
    onFocus:当Text获得焦点时,产生该事件。
    OnBlur:元素失去焦点时,产生该事件。
    Onselect:当文字被加亮显示后,产生该文件。
    onchange:当Text元素值改变时,产生该文件。
    例:”text.htm”
    <Form name="test">
    <input type="text" name="test" value="this is a javascript" >
    </form>
    ...
    <script language ="Javascirpt">
    document.mytest.value="that is a Javascript";
    document.mytest.select();
    document.mytest.blur();
    </script>

    展开全文
  • form表单对象

    2015-08-13 10:37:50
    这个是关于表单表单HTML中是很重要的一个部分,关于表单使用,里面的属性和方法不算很多,这里就介绍一下表单的信息: 用法:document.forms[]是一个数组,包含了文档中所有的表单要引用表单可以用document....
  • JavaScript表单对象Form介绍

    万次阅读 2011-04-03 00:19:00
    原文地址:http://www.pczpg.com/a/2010/0312/3106_2.html<br />  要实现动态交互,必须掌握有关表单对象(Form)和框架对象(Frames)更为复杂的知识。 1、 表单基础知识 表单是最常见的与...
  • 表单--form对象

    千次阅读 2016-12-20 20:07:00
    在Javascript 中,页面上的每一对 标记都解析为一个对象,即form 对象。所有的表单元素都支持type...如果一个表单对象定义如下:   获得该表单对象的方法:  1> document.forms["frm1"]; // 根据name属性值
  • HTML学习笔记--表单标记

    千次阅读 2011-05-04 15:15:00
    其它的表单对象,都要插入到表单之中。单击提交按纽时,提交的也是表单范围之内的内容。第二方面,携带表单的相关信息,例如处理表单的脚本程序的位置、提交表单的方法等。 基本语法 ……
  • 使用html标记动态填充几乎所有js对象表单/页面 使用表单内完成的更改来更新现有的js对象(=无需额外代码即可处理数据) 提供使用html标记进行格式化的基本功能(即日期/时间,金额,字节) 提供表单验证功能 ...
  • 通过代码中的“标记语法”从对象或光标动态生成UI表单。 (注意:文档页面正在从原始VFPx / CodePlex站点迁移到此GitHub存储库中。) 原始CodePlex链接: ://vfpx.codeplex.com/wikipage title Dynamic Forms ...
  • JavaScript 表单对象 | 看完不会请来捶我

    千次阅读 多人点赞 2020-01-12 17:01:11
    文章目录一、访问表单与表单元素1、JavaScript访问表单2、JavaScript访问表单元素二、表单对象的属性、方法与事件1、属性2、方法3、事件三、表单元素1、文本框(1)文本框属性(2)文本框方法(3)例子1:验证表单...
  • HTML5表单及文件处理

    千次阅读 2019-09-14 11:26:37
    1、HTML4表单 表单是网页中的常用组件,用户可以通过表单向服务器提交数据。表单中可以包括标签(静态文本)、单行文本框、滚动文本框、复选框、单选按钮、下拉菜单... 表单ID,用来标记一个表单 name ...
  • 使用Asp.net 接收html提交的表单

    千次阅读 2007-09-07 11:43:00
    使用asp.net 接收html静态页面提交的表单时,接受的函数应使用 this.Request.QueryString["userName"],不能使用string userName = this.Request.Form["userName"].ToString(); 后一种方法会提示“未将对象引用设置...
  • HTML(5):表单

    千次阅读 2016-06-10 19:58:53
    1、HTML 标签 标签属性: (1)、accept:HTML5 不支持。...(3)、action:规定当提交表单时向何处发送表单数据。 (4)、autocomplete :规定是否启用表单的自动完成功能。值为:on、off (5)、enctype
  • 可以使用标记创建一组列表项,可以为输入框做提示 该元素需要与input进行绑定,需要有选项option 语法: 2、progress元素 进度条,消失处理的进度值 语法:<progress></progress> 属性:value:当前进度...
  • html中的表单元素

    千次阅读 2012-07-30 15:50:27
    在Javascript 中,页面上的每一对 标记都解析为一个对象,即form 对象。...如果一个表单对象定义如下: form name="frm1" method="post" action="login.aspx"> 获得该表单对象的方法:  i> d
  • 演示课件 第六章 表单与页面控件 重要的编程界面接口元素 课程目标 通过本章学习可以掌握 表单的基本概念及作用 写入标记 菜单下拉列表 DOM文档对象模型 从编程角度可以将网页各层次分解成不同对象 浏览器窗口 ...
  • 通过action属性提交HTML表单

    千次阅读 2018-05-08 08:06:43
    表单HTML表单用&lt;form&gt;来定义,是用来收集用户输入的。B.一些重要的属性 1.action 指定某个服务器脚本来处理被提交的表单。省略,则被设置为当前页面。 2.method 规定在提交表单使用的HTTP方法...
  • Yii 使用表单

    千次阅读 2013-03-08 15:46:17
    十一、使用表单 在 Yii 中处理表单时,通常需要以下步骤: 1. 创建用于表现要收集数据字段的模型类。 2. 创建一个控制器动作,响应表单提交。 3. 在视图脚本中创建与控制器动作相关的表单。 一、创建模型 在...
  • 一、表单使用 1、表单 产出地址:http://www.bing.com/search?q=love 2、get方法还是Post方法 在Web应用程序中,Get请求用于读操作,Post请求用于写操作(通常包括更新、创建、删除) 二、HTML辅助...
  • HTML 表单 (form) 的作用解释

    千次阅读 2017-08-29 15:35:44
    表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、...
  • 使用 Builder 对象,您需要附带一个 DOM 表单对象,该对象必须包含一些特定的属性。 HTML 属性 输入、textAreas 和表单上可以有 data-* 属性以实现构建器表单。 data-type定义了需要创建的标记名 - 可选的data-...
  • 常用表单标记的意义及使用 表单布局标记的意义及使用 目录: 9.1 表单的作用 9.2 表单标记 9.3 表单布局标记 9.1 表单的作用 HTML中的表单(form)是网页中最常用的组件,是网站服务器端与客户 端之间沟通的...
  • Html中的form对象

    千次阅读 2016-06-09 15:29:59
    一个标记,就是一个form对象。 form对象的属性 name:获取表单的名称,一般给JS使用。 method:表单提交方法。 GET方式:数据在地址栏显示,不安全、传递数据量小、不能上传附件。 POST方式:相对安全、传递数据大...
  • 在经过了各种修改后,终于成功将表单居中,下面分享一下我经历过程中的错误与最终结果。(因为做这部分作业的时候还没有学 css,所以没用)1、刚做出来的样子名字:姓氏:登录名:(可包含a-z、0-9和下划线)密码:(至少...
  • 场景:使用spring框架时,在控制类方法中可以使用@ModelAttribute标记自定义类参数,spring会自动将表单提的值绑定到标记的类中同名属性中。 作用:用于转化表单数据类型,同时便于将表单值传递到类中,在复杂的...
  • 阿ken的HTML、CSS的学习笔记_表单的应用(笔记七)

    千次阅读 热门讨论 2021-01-28 12:09:51
    在网页中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成,如图7-1 和图7-2示,即为一个简单的HTML表单界面及其构成。 对于表单构成中的表单控件、提示信息和表单

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 104,541
精华内容 41,816
关键字:

表单对象所使用的html的标记