精彩专题推荐:建站之入门课 建站之必修课 建站之关键课 网站价值所在 流量提高专题 css+div 标准 个人网站打造全过程
返回建站学首页
导航:
建站首页 | 网站设计 | 网站开发 | 网站运营 | 网页软件 | 建站指南 | 搜索优化 | 图像处理 | 视频教程 | 书籍教程 | 建站专题
当前位置:首页>网站设计>html/xhtml教程>正文

新手好文:HTML网页表单制作实例讲解


来源:网络 时间:07-05-23 点击: 点击这里收藏本文
    文本框
    代码格式:<input type="text" name="..." size="..." maxlength="..." value="...">
    属性解释:
    type="text"定义单行文本输入框;  
    name属性定义文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;  
    size属性定义文本框的宽度,单位是单个字符宽度;  
    maxlength属性定义最多输入的字符数;  
    value属性定义文本框的初始值;
    演示:
    以上演示的代码是: <input type="text" name="example1" size="20" maxlength="15">
    多行文本框
    代码格式:<TEXTAREA name="..." cols="..." rows="..." wrap="VIRTUAL"></TEXTAREA>
    属性解释:
    name属性定义多行文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
    cols属性定义多行文本框的宽度,单位是单个字符宽度;  
    rows属性定义多行文本框的高度,单位是单个字符宽度;  
    wrap属性定义输入内容大于文本域时显示的方式,可选值如下:
    • 默认值是文本自动换行;当输入内容超过文本域的右边界时会自动转到下一行,而数据在被提交处理时自动换行的地方不会有换行符出现;
    • Off,用来避免文本换行,当输入的内容超过文本域右边界时,文本将向左滚动,必须用Return才能将插入点移到下一行;
    • Virtual,允许文本自动换行。当输入内容超过文本域的右边界时会自动转到下一行,而数据在被提交处理时自动换行的地方不会有换行符出现;
    • Physical,让文本换行,当数据被提交处理时换行符也将被一起提交处理。
    演示:
    以上演示代码是: <TEXTAREA name="example2" cols="20" rows="2" wrap="PHYSICAL"></TEXTAREA>
    密码框
    代码格式:<input type="password" name="..." size="..." maxlength="...">
    属性解释:
    type="password"定义密码框;  
    name属性定义密码框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;  
    size属性定义密码框的宽度,单位是单个字符宽度;  
    maxlength属性定义最多输入的字符数。
    演示:
    以上演示代码是: <input type="password" name="example3" size="20" maxlength="15">
    复选框
    代码格式:<INPUT type="checkbox" name="..." value="...">
    属性解释:
    type="checkbox"定义复选框;
    name属性定义复选框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
    value属性定义复选框的值.
    演示: Webjx.Com FreeInfo.Webjx.Com
    以上演示代码是: <input type="checkbox" name="Webjx.Com" value="09">Webjx.Com<input type="checkbox" name="FreeInfo.Webjx.Com" value="08">FreeInfo.Webjx.Com
    单选框
    代码格式:<INPUT type="radio" name="..." value="...">
    属性解释:
    type="radio"定义复选框;
    name属性定义复选框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
    value属性定义复选框的值.
    演示: JZxue.Com FreeInfo.JZxue.Com
    以上演示代码是: <input type="radio" name=" myFavor" value="09">JZxue.Com<input type="checkbox" name=" myFavor" value="08">FreeInfo.JZxue.Com
    文件上传框
    代码格式:<input type="file" name="..." size="..." maxlength="...">
    属性解释:
    type="file"定义文件上传框;
    name属性定义文件上传框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;
    size属性定义文件上传框的宽度,单位是单个字符宽度;
    maxlength属性定义最多输入的字符数。
    演示:
    以上演示代码是: <input type="file" name="myfile" size="15" maxlength="100">
    下拉选择框
    代码格式:
    <select name="..." size="..." multiple>
    <option value="..." selected>...</option>
    ...
    </select>
    属性解释:
    size属性定义下拉选择框的行数;
    name属性定义下拉选择框的名称;
    multiple属性表示可以多选,如果不设置本属性,那么只能单选;
    value属性定义选择项的值;
    selected属性表示默认已经选择本选项。
    演示:
    以上演示代码是:
    <select name="mySel" size="1">
    <option value="1" selected>Webjx.Com</option>
    <option value="2">FreeInfo.Webjx.Com</option>
    </select>
    表单中的两个常用的按钮
    代码格式:<input type="reset" name="..." value="...">
    属性解释:
    type="reset"定义复位按钮;
    name属性定义复位按钮的名称;
    value属性定义按钮的显示文字;
    表单中常用按钮的演示及代码:
    提交按钮    代码: <input type="submit" name="mySent" value="发送">
    复位按钮    代码: <input type="reset" name="mySent" value="取消">

  把此文章收藏到:          
广而告之
文章搜索
  • Google JZxue.Com

关于我们 | 联系我们 | 友情链接 | 网站地图
Copyright © 2005 - 2006 建站学 All rights reserved.