星之码-前端开发-html与用户交互,表单域

584 05-11

与用户交互,表单域

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表单常用的属性，示例效果请复制粘贴运行即可。

————————————————

智一面|前端面试必备练习题

标签： HTML