其他对象的表单

1.textarea:
textarea对象就想是input对象中的text样式的表单,只不过是扩展过的text样式表单。它可以通过行(rows)属性和列(cols)属性来编辑文本域的大小。最常见于留言板、论坛时回帖时的文本框等。

<html>
    <head>
        <title>textarea对象的表单</title>
        <style type="text/css">
            body{
                font:120% 微软雅黑;
            }
            textarea{
                font:80% 微软雅黑;
                color:navy;
            }
        </style>
    </head>
    <body>
        留言板
        <form action="..." method="post" enctype="multipart/form-data">
            <textarea name="some" rows="10" cols="50" value="say">
                请文明用语:                
            </textarea>
        </form>
    </body>
</html>

 

textarea属性标签是必须要封闭的,此外在<textarea>标签中放入文本,如上面的“请文明用语”那么在生成页面的时候,会预先设置好文本,它可以给用户带来亲切的感受。但同时,用户不得不先删除预先的文本。(如果在文本框中输入的内容超出预先设置的行数,会自动出现滚动条,如果没有超出文本框的范围,滚动条呈灰色。)

 

2.select对象的表单:
Select对象的表单将创建出一个列表样式的表单,显示为一个下拉列表,令用户可以方便地选择其中一个目录。通常在一些要求填写用户地区、生日等信息时,设计者可以给使用者准备好选项,令使用者填写信息时更方便。在代码的写法中,需要使用<option>标签来定义可供选择的每一项。

<body>
        <form action="...">
            地址:<select name="上海">
                <option>黄浦区</option>
                <option>虹口区</option>
                <option>静安区</option>
                <option>长宁区</option>
                <option>杨浦区</option>
                <option>宝山区</option>
                <option>浦东新区区</option>
                <option>徐汇区</option>
                <option>普陀区</option>
            </select>
        </form>

</body>

用户可以通过下拉列表选择一个“地址”,而这个数据则会被表单发送到服务器。还可以使用value属性为每一个option指定不同的值,如果是这样value设置的值将取代option的文本内容。
(如果设计者希望预先设置初始值,那么在所希望的option中添加select="selected"如,<option selected="selected">浦东新区</option>)

此外,如果下拉列表中的选项太多,可以使用<optgroup>标签配合label属性来给选项分类

<body>
        <form action="...">
            地址:<select name="上海">
                <optgroup label="Team1">
                    <option>黄浦区</option>
                    <option>虹口区</option>
                    <option>静安区</option>
                    <option>长宁区</option>
                </optgroup>
                <optgroup label="Team2">
                    <option>杨浦区</option>
                    <option>宝山区</option>
                    <option selected="selected">浦东新区区</option>
                    <option>徐汇区</option>
                    <option>普陀区</option>
                </optgroup>
            </select>
        </form>
</body>

 

此外,如果设计者不希望select对象以下拉列表的形式展示出来,有一种方式可以将目录项以滚动条的框体样式表现出来。只需要在<select>标签中加入size属性,如size="6"则表示这是个能容纳 6行文字的文本框。

 

不好看……)

 


表单域集合:
如果一个页面中表单的项目过于繁多,设计者可以通过使用表单域将表单分组。当然,表单域未必是只有表单太长才适合用。事实上,很多时候,设计者以这样的方式修饰表单部分。
表单域的代码有<fieldset>标签和<legend>标签组合而成。默认情况下,<fieldset>标签绘制出表单域的框型,<legend>标签的对象像标题一样出现在框型的左上角。

<body>
        <form action="..." method="post">
            <fieldset>
                <legend>注册信息:</legend>
                输入用户名:<input name="name" type="text" size="20" maxlength="12">
                <!--这里可以放入许多样式表的表单-->
            </fieldset>
        </form>
</body>

 

posted @ 2017-11-29 00:08  汪神  阅读(167)  评论(0编辑  收藏  举报