html表单

一、表单

(1)表单的作用：与用户进行交互，提供表单元素让用户输入

(2)表单元素：

   文本框(text): 单行，基本输入

   列表框(select):提供多个项让用户选择

   单选框(radio) :用户只能选择其中一项

   复选框(checkbox):用户可以选择多项

   密码框(password):输入敏感数据

   文本域(textarea):多行文本

   文件域(file):   让用户选择文件

   注：输入(text,password,textArea),选择（select,radio,checkbox,file）,按钮(button,submit,reset,image)

 

   普通按钮：   button

   提交按钮：   submit(将表单中用户输入的数据提交到服务器)

   重置按钮：   reset, 还原到初始状态(与清空近似)

   图片提交按钮:image

   隐藏域： hidden,隐式提交的数据，用户不可见

(3)表单标记：form

  <form   action="数据提交的地址"   method="提交的方式">

     ...表单元素

  </form>

   注：1.一个网页中可以有多个form

      2.表单元素需要写在form标记中

      3.提交方式有post密文提交(例登录信息), get地址栏显示提交(例搜索引擎)

(4)表单元素标记:input,select,button,textarea

   1.input

    <input   type="表单元素的类型"   name="表单元素的名字"  value="值"  size="大小"maxlength="最大长度"

    checked="true|false" src="图片提交按钮的路径"/>

     注：a.文本域和列表框不能使用input标记

        b.取名时尽量让名字有意义,例：  chkLike= chk类型，like作用 

        c.单选框复选框同组的名字要相同 

        d.单选框和复选框的值不可见，只用于提交，例:<input type="radio" value="1"/>男

          男是提示作用，1会提交到服务器  

        e.size是指宽度,maxlength允许输入的字数

        f.checked用于单复选，是否选中,默认不选中

        g.不带type，默认是文本框

   2.texarea文本域

     <textarea   cols="总列数"   rows="总行数"  name="名字">值</textarea>

    注：textarea没有value属性

       值可以直接使用空格和回车

   3.select...option列表框

                          <select  name="sltShengfen">

                                     <option>湖南</option>

                                     <option>湖北</option>

                                     <option  selected="true">江西</option>

                                     <option>江苏</option>

                            </select>

   4.button按钮

     <button type="reset|button|submit">内容</button>

     注:<button>与<input>比较：

        <button>更灵活，可以插图片和使用文字，也可局部设置格式

        <input> 更通用，除了文本域和列表框，它都可实现

     注2：省略type,默认为button

 

二、小知识：

1.<!--注释 -->

2.特殊符号  &开头;结束

 &lt;   表<

 &gt;   表>

 &nbsp; 表空格

 

 &quot; 表引号

 &copy; 版权符号

 

3.表单的readonly和disabled

 (1)readonly用于输入框 ,disabled用于按钮

 (2)readonly表示只读，disabled禁用

  (3)如果文本框使用readonly表示只读，但数据可以提交

     但使用disabled不仅是只读，框中数据不能被提交