与用户交互,表单域

1、单行文本框

解释:文本框是一种让访问者自己输入内容的表单对象,通常被用来填写简短的内容和回答
语法:<input type="text" name="名称" value="值" size="宽度" maxlength="输入最大长度" readonly="readonly"/>

2、密码文本框

解释:密码框是为了隐藏用户输入密码信息
语法:<input type="password" name="名称" value="值" size="宽度" maxlength="输入最大长度" readonly="readonly"/>

3、单行文本框与密码框属性说明:

  • type:定义文本框类型,text(文本框)、password(密码框)、hidden(隐藏域)
  • name:文本框名称,为了保证数据采集准确性,必须唯一
  • id:文本框的id,常用于jquery验证或采集数据
  • size:定义文本框的长度,单位是单个字符的宽度
  • maxlength:定义文本框最多输入的字符数
  • value:文本框的初始值(默认值)
  • readonly:设置文本框是否只读

4、隐藏域

解释:隐藏域是用来收集或发送信息的不可见元素,对于网页访问者,隐藏域是看不见的。当表单被提交时,隐藏域就会将信息用你设置定义的名称和值发送到服务器上
语法:<input type="hidden" name="名称" value="值"/>
隐藏域的优点:
(1)不需要任何服务器资源。
(2)支持广泛,任何客户端都支持隐藏域
(3)实现简单,隐藏域属于HTML控件,无需像服务器控件那样有需要编程知识
隐藏域的缺点:
(1)具有较高的安全隐患,因为客户端源码可以看见
(2)存储结构简单
(3)如果存储了较多的较大的值,则会导致性能问题
(4)如果隐藏域过多,则在某些客户端中被禁止
(5)隐藏域将数据存储在服务器上,而不存储在客户端

5、多行文本框

解释:一种让访问者自己输入内容的表单对象,能让访问者填写较长的内容
语法:<textarea name="名称" rows="3" cols="20" wrap="virtual" />…</textarea>
属性说明:

  • name:定义多行文本框名称,为了保证数据采集准确性,必须唯一
  • cols:定义多行文本框的宽度,单位是单个字符宽度
  • rows:定义多行文本框的高度,单位是单个字符宽度
  • wrap:定义输入内容大于文本域时显示的方式,可选值如下:

(1)默认值是文本自动换行,当输入内容超过右边界时会自动转到下一行,在数据被提交时自动换行的地方不会有换行符出现
(2)Off,用来避免文本换行,当输入的内容超过右边界时,文本将向左滚动,必须用Return才能将插入点移到下一行
(3)Virtual,允许文本自动换行。当输入内容超过右边界时会自动转到下一行,在数据被提交时自动换行的地方不会有换行符出现
(4)Physical,让文本换行,在数据被提交处理时换行符也将被一起提交处理

6、单选框

解释:用于唯一选择,比如单选题、状态选择等
语法:<input type="radio" name="名称" value="值" checked="checked" disabled="disabled"/>
属性说明:

  • type:定义类型为单选按钮
  • name:定义单选框名称,为了保证数据采集准确性,单选框都是以组为单位使用,在同一组中的单选项都必须用同一个名称
  • value:定义单选框的值,在同一组中,它们的域值必须是不同的
  • checked:定义单选框是否被选中,如不需要选中则去掉checked=”checked”
  • disable:定义单选按钮不可用,不可点击

7、复选框

解释:复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素,都必须有一个唯一的名称。
语法:<input type="checkbox" name="名称" value="值" checked="checked" disabled="disabled"/>
属性说明:

  • type:定义类型为复选框
  • name:定义复选框名称,为了保证数据采集准确性,必须唯一
  • value:定义复选框的值
  • checked:定义复选框是否被选中,如不需要选中则去掉checked=”checked”
  • disable:定义复选框不可用,不可点击

8、下拉选择框

解释:下拉选择框允许你在一个有限的空间设置多种选项,比如城市级联选择等
语法:

<select name="名称" size="数字" >
    <option value="选项值 " selected="selected" multiple="multiple">
    <option value="选项值">
    <option value="选项值">
</select>

属性说明:

  • name:定义下拉选择框的名称
  • size:定义下拉列表中可见选项的数目
  • value:定义选择项的值
  • selected:表示默认已经选择本选项
  • multiple:表示可以多选,如果不设置本属性,那么只能单选,默认单选。
  • optgroup:定义下拉选项组

optgroup属性:
(1)label:选项组的标签描述
(2)disabled:禁止改选项组,灰色显示
optgroup示例如下:

<select>
    <optgroup label="Swedish Cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </optgroup>
</select>

9、文件上传框

解释:用于用户在客户端上传文件。
语法:<input type="file" name="名称" size="15" maxlength="100"/>
属性说明:

  • type:定义文件上传框
  • name:定义文件上传框名称,为了保证数据采集准确性,必须唯一
  • size:定义文本框的长度,单位是单个字符的宽度
  • maxlength:定义文本框最多输入的字符数

10、按钮

(1)提交按钮:<input type="submit" value="提交"/>
(2)重置按钮:<input type="reset" value="重置"/>
(3)一般按钮:<input type="button" value="Click me" onclick="msg()"/>
(4)图像按钮:<input type="image" src="submit.gif" alt="Submit"/>
(5)按钮图片:<button name=”提交” type=”button”><img src=”URL”/></button>

11、表单fieldset与legend

说明:fieldset定义表单外边框,legend定义表单标题
示例如下:

<form>
    <fieldset>
        <legend>标题</legend>
          height: <input type="text" />
          weight: <input type="text" />
    </fieldset>
</form>

12、form完整用户注册示例

<form action="User.php" method="post" enctype="MIME">
    用户名:<input type="text" name="username" value="" size="20" maxlength="10"/>
        <br/>
    密码:<input type="password" name="password" value="" size="20" maxlength="10"/>
        <br/>
    性别:
        <input type="radio" name="sex" value="boy" checked="checked"/>男
        <input type="radio" name="sex" value="gril"/>女
        <br/>
    爱好:
        <input type="checkbox" name="ins" value="basketball"/>篮球
        <input type="checkbox" name="ins" value="football" checked="checked"/>足球
        <input type="checkbox" name="ins" value="badminton"/>羽毛球
        <br/>
    家乡:
        <select name="home">
            <option value="四川" selected="selected">四川</option>
            <option value="重庆">重庆</option>
            <option value="北京">北京</option>
        </select>
        <br/>
    头像:<input type="file" name="icon" size="15" maxlength="100"/>
        <br/>
    备注:<textarea rows="3" cols="20" name="remark"></textarea>
        <br/>
        <input type="hidden" name="id" value="1">
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
</form>

以上基本上就是form表单常用的属性,示例效果请复制粘贴运行即可。