HTML表单

  表单是可以把浏览者输入的数据传送到服务器端的程序(比如ASP,PHP)的HTML元素,服务器端程序可以处理表单传过来的数据,从而进行一些动作.

  表单用form标签来定义,form表单只要有以下几个属性:

    name--用来标识这个表单,在javascript中可以通过 document.表单名 来取得这个表单
    action--浏览者输入的数据被传送到的地方.
    method--表示提交方式,可以选择post和get,默认为get方式.两种方式的区别:
    post--所有提交的参数都会隐藏,没有参数的大小限制,建议使用该方式
    get--所有提交参数都会在地址栏显示,参数总量最大4-5K.不建议使用
    enctype--表示表单的封装方式,只有在进行文件上传时才会使用,当执行文件上传时,必须将这个值设置为 enctype="multipart/form-data"
    onsubmit--当表单提交时自动执行的javascript事件,一般在需要进行提交验证时使用.

  input标签

  input标签代表html表单的单行输入域,input标签分为3种类型

    1.输入型--包括text,password,file.

    2.选择型--包括checkbox和radio

    3.点击型--包括button,image,sbumit,reset.

  其中除了name属性是必选的以外,其他属性都是可选的。这些属性的功能和用法介绍如下:

    name--该属性用于指定保存用户输入文本的变量和名称

    title--该属性用于input元素的标签,通常是位于输入框前的提示信息。

    type--用于指定文本输入区的类型.
        
    value--该属性用于指定name属性所定义变量的值,它将显示在输入框中。

    default--该属性用于指定name属性所定义变量的默认值。

    format--该属性用于格式化输入的数据。

    maxlength--该属性用于指定用户可输入字符串的最大长度。该属性的上限为256,最多不能超过256个字符。

    emptyok--用于指定用户是否可以不在输入框内输入内容。

    size--该属性用于指定输入框的宽度,宽度值为字符个数。

    tabindex--用于指定多个输入框存在时,类似于HTML中Tab键的具体位置。

   示例:

    <input name="variable" title="label" type="type" value="value" default="default" format="specifier" emptyok="false|true" size="n" maxlength="n" tabindex="n"/>

  input标签的type属性值有以下几种:

    text -- 文字输入域(输入型)
    password -- 也是文字输入域,但是输入的文字以密码符号'*'显示(输入型)
    file -- 可以输入一个文件路径(输入型)
    checkbox -- 复选框.可以选择零个或多个(选择型)
    radio -- 单选框.只可以选择一个而且必须选择一个(选择型)
    hidden -- 代表隐藏域,可以传送一些隐藏的信息到服务器
    button -- 按钮(点击型)
    image -- 使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src屬性)(点击型)
    submit -- 提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性來显示按鈕上的文字(点击型)
    reset -- 重置按钮,可以把表单中的信息清空(点击型)

  input标签的checked属性

  checked是使选择型输入域或者框被选中.如:<input type="checkbox"  id="11" name="22" checked="checked" />

  input标签的disabled属性

  disabled属性是禁止对输入域进行操作.<input type="checkbox"  id="11" name="22" disabled="disabled" />

  input标签的disabled属性

  readonly属性表示只读(只能看到,不能修改)的输入域(框).<input type="checkbox"  id="11" name="22" readonly="readonly" />

  textarea标签

  textarea标签代表html表单的多行输入域.有以下属性:

    cols--多行输入域的列数
    rows--多行输入域的行数
    accesskey--表单的快捷键访问方式
    disabled--输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用
    readonly--输入域可以选择,但是无法修改
    tabindex--输入域,使用"tab"键的遍历顺序

    如:<textarea cols="50" rows="10" id="jianyi" name="jianyi">默认值,可有可无</textarea>  

  select标签

  select标签可创建单选或多选菜单.主要属性有以下几种

  size -- 选择域的高度
  multiple -- 可以有多个选择
  disabled -- 输入框无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用
  tabindex -- 使用"tab"键的遍历顺序
  name --规定下拉列表的名称。

  示例:

    <select size="1" id="select" name="select">
        <option>北京市</option>
        <option>上海市</option>
        <option>天津市</option>
        <option>重庆市</option>
    </select>

  select标签下的option标签

  代表选择列表的一个选择项,属性如下:

  label -- 说明选择项
  value -- 说明选择项的值
  selected -- 此选择项已经被选择
  disabled -- 输入框无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用
  tabindex -- 使用"tab"键的遍历顺序

  select标签下的optgroup标签

  optgroup标签代表分组选择项的类别名(此类别名不能选择),有个label属性,是选择项的标题,对选择项进行说明.

  示例:

  <select id="WebDesign" name="WebDesign">
      <optgroup label="client">
          <option value="HTML">HTML</option>
          <option value="CSS">CSS</option>
          <option value="javascript">javascript</option>
      </optgroup>
      <optgroup label="server">
          <option value="PHP">PHP</option>
          <option value="ASP">ASP</option>
          <option value="JSP">JSP</option>
      </optgroup>
      <optgroup label="database">
          <option value="Access">Access</option>
          <option value="MySQL">MySQL</option>
          <option value="SQLServer">SQLServer</option>
      </optgroup>
  </select>

  label标签

  label标签是为 input 元素定义标注.

  label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

  <label> 标签的 for 属性应当与相关元素的 id 属性相同。

  示例:

  <form>

  <label for="name">姓名</label>

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

  </form>

  fieldset和legend标签

  fieldset 标签--对表单进行分组
  legend 标签 -- 对表单的每组内容进行说明

  表单综合示例:

          <form id="xinxi" action="chuli.php" method="post">
            <p>
                <fieldset>
                    <legend>姓名密码单行输入</legend>                        
                        <label for="name">姓名:<input type="text" id="name"/></label>
                        <label for="password">密码:<input type="password" id="password"/></label>
                        <label for="guoji">国籍:<input type="text" id="guoji" value="中国" readonly="readonly" /></label>
                </fieldset>
            </p>
            
            <p>
                <fieldset>
                    <legend>性别单选</legend>                        
                        <label for="nan">男:<input type="radio" name="sex" id="nan"/></label>
                        <label for="nv">女:<input type="radio" name="sex"  id="nv"/></label>
                        <label for="baomi">保密:<input type="radio"  name="sex" id="baomi"/></label>
                </fieldset>
            </p>
            
            <p>
                <fieldset>
                    <legend>爱好多选</legend>                        
                        <label for="xuexi">学习<input type="checkbox" name="aihao" id="xuexi" checked="checked" /></label>
                        <label for="lvyou">旅游<input type="checkbox" name="aihao"  id="lvyou" /></label>
                        <label for="diaoyu">钓鱼<input type="checkbox"  name="aihao" id="diaoyu" /></label>
                        <label for="zuguo">祖国<input type="checkbox"  name="aihao" id="zuguo" checked="checked" disabled="disabled" /></label>
                </fieldset>
            </p>
            
            <p>
                <fieldset>
                    <legend>单行单选下拉列表</legend>                        
                        <label for="shengfen">选择省份</label>
                        <select size="1" name="xuanze" id="shengfen">
                            <option value="1">山东省</option>
                            <option value="2">河北省</option>
                            <option value="3" selected="selected">江苏省</option>
                            <option value="4">浙江省</option>
                            <option value="5">安徽省</option>
                            <option value="6">湖南省</option>
                        </select>                        
                </fieldset>
            </p>
            
            <p>
                <fieldset>
                    <legend>多行单选或ctrl单击多选下拉列表</legend>                        
                        <label for="chengshi">选择城市</label>
                        <select size="5" name="xuanze" multiple="multiple" id="chengshi">
                            <option value="1">济南市</option>
                            <option value="2">石家庄市</option>
                            <option value="3" selected="selected">南京市</option>
                            <option value="4">杭州市</option>
                            <option value="5">合肥市</option>
                            <option value="6">长沙市</option>
                        </select>                        
                </fieldset>
            </p>
            
            <p>
                <fieldset>
                    <legend>分组单选下拉列表</legend>                        
                        <label for="fenzu"></label>
                        <select size="1" name="xuanze"  id="fenzu">
                            <optgroup label="山东省">
                                <option value="jinan">济南市</option>
                                <option value="qingdao">青岛市</option>
                                <option value="yantai">烟台市</option>
                                <option value="weihai">威海市</option>
                            </optgroup>
                            <optgroup label="河南省">
                                <option value="zhengzhou">郑州市</option>
                                <option value="kaifeng">开封市</option>
                                <option value="luoyang">洛阳市</option>
                                <option value="xinyang">信阳市</option>
                            </optgroup>
                            <optgroup label="湖南省">
                                <option value="changsha">长沙市</option>
                                <option value="xiangtan">湘潭市</option>
                                <option value="yueyang">岳阳市</option>
                                <option value="huaihua">怀化市</option>
                            </optgroup>
                            <optgroup label="四川省">
                                <option value="chengdu">成都市</option>
                                <option value="mianyang">绵阳市</option>
                                <option value="yibin">宜宾市</option>
                                <option value="leshan">乐山市</option>
                            </optgroup>
                        </select>                        
                </fieldset>
            </p>
            
            <p>
                <fieldset>
                    <legend>文件上传以及留言文字域</legend>                        
                        <label for="wenjian">上传文件:
                        <input type="file" name="shangchuan" id="wenjian" size="35" maxlength="255" />
                        </label>
                        <br /><br />
                        <label for="">留言<br />
                            <textarea cols="50" rows="10">默认留言,可有可无</textarea>
                        </label>
                </fieldset>
            </p>
            
            <p>
                <fieldset>
                    <legend>按钮</legend>    
                        <input type="submit" value="提交"  name="anniu" id="tijiao" />
                        <input type="reset" value="重写"  name="anniu" id="chongxie" />
                        <input type="image" src="http://www.baidu.com/img/baidu_sylogo1.gif" title="这是图像按钮"  />
                        <input type="button" value="普通按钮"  name="anniu" id="anniu" />
                        
                </fieldset>
            </p>
        </form>   

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值