HTML元素一览之五：表单交互

作者:jam /查看次数: 112 字体大小: 小 中 大

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

readonly 属性 -- 表示只读(只能看到,不能修改)的输入域(框)
    例子：<form id="dreamduform" action="dreamdu.php" method="post">
    <label for="notinput">无法输入的输入框</label>
    <input type="text" id="notinput" name="notinput" readonly="readonly" />
    </form>

disable 属性 -- 表示已经失效的输入域(框)
    例子：<form id="dreamduform" action="dreamdu.php" method="post">
        <label for="fav">旅游</label>
        <input type="checkbox" value="2" id="fav" name="fav" disabled="disabled" />
    </form>

textarea 标签 -- 代表HTML表单多行输入域
    属性：# cols -- 多行输入域的列数
    # rows -- 多行输入域的行数
    # alt -- 代表表单的提示文字,当鼠标停留时
    # accesskey -- 表单的快捷键访问方式
    # disabled -- 输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用
    # readonly -- 输入域可以选择,但是无法修改
    # tabindex -- 输入域,使用"tab"键的遍历顺序

select 标签 -- 选择列表标签
    属性：    *  Common -- 一般属性
            * size -- 选择域的高度
            * multiple -- 可以有多个选择
            * disabled -- 输入框无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用
            * tabindex -- 使用"tab"键的遍历顺序
    例子：<form id="dreamduform" action="dreamdu.php" method="post">
    <fieldset>
        <legend>你对梦之都的感觉:</legend>
        <label for="select">你对梦之都的感觉</label>
        <select size="1" id="select" name="select">
            <option>很全面,很好</option>
            <option>一般般吧,还要努力</option>
            <option>有很多问题,不过还可以</option>
        </select>
      </fieldset>
      <fieldset>
        <legend>你想在梦之都学习的编程语言:</legend>
        <label for="multipleselect">你想在梦之都学习的编程语言</label>
        <select size="10" multiple="multiple" id="multipleselect" name="multipleselect">
            <option>XHTML</option>
            <option>CSS</option>
            <option>JAVASCRIPT</option>
            <option>XML</option>
            <option>PHP</option>
            <option>C#</option>
            <option>JAVA</option>
            <option>C++</option>
            <option>PERL</option>
        </select>
      </fieldset>
</form>

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

optgroup 标签 -- 代表分组选择项的类别名(此类别名不能选择)
    例子：<form action="dreamdu.php" method="post" id="dreamduform">
    <label for="WebDesign">选择一个你在梦之都最想学的</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>
</form>

fieldset 标签 -- 对表单进行分组
    说明：# fieldset标签是成对出现的,以<fieldset>开始,以</fieldset>结束
              # 一个表单可以有多个<fieldset>,每对<fieldset>为一组,每组内容的描述可以使用legend标签说明
    例子：<form action="dreamdu.php" method="post" id="dreamduform">
    <fieldset>
        <legend>用户名与密码:</legend>
        <input id="hiddenField" name="hiddenField" type="hidden" value="hiddenvalue" />
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" value="dreamdu" />
        <label for="pass">密码:</label>
        <input type="password" id="pass" name="pass" />
    </fieldset>
    <fieldset>
        <legend>性别:</legend>
        <label for="boy">男</label>
        <input type="radio" value="1" id="sex" name="sex" />
        <label for="girl">女</label>
        <input type="radio" value="2" id="sex" name="sex" />
        <label for="sex">保密</label>
        <input type="radio" value="3" id="sex" name="sex" />
    </fieldset>
    <fieldset>
        <legend>我最喜爱的:</legend>
        <label for="computer">计算机</label>
        <input type="checkbox" value="1" id="fav" name="fav" />
        <label for="trval">旅游</label>
        <input type="checkbox" value="2" id="fav" name="fav" />
        <label for="buy">购物</label>
        <input type="checkbox" value="3" id="fav" name="fav" />
    </fieldset>
    <fieldset>
        <legend>对梦之都的意见:</legend>
        <label for="select">你对梦之都的感觉</label>
        <select size="1" id="select" name="select">
            <option>很全面,很好</option>
            <option>一般般吧,还要努力</option>
            <option>有很多问题,不过还可以</option>
        </select>
    </fieldset>
    <fieldset>
        <legend>梦之都编程语言选择:</legend>
        <label for="multipleselect">你想在梦之都学习的编程语言</label>
        <select size="10" multiple="multiple" id="multipleselect" name="multipleselect">
            <option>XHTML</option>
            <option>CSS</option>
            <option>JAVASCRIPT</option>
            <option>XML</option>
            <option>PHP</option>
            <option>C#</option>
            <option>JAVA</option>
            <option>C++</option>
            <option>PERL</option>
        </select>
    </fieldset>
    <fieldset>
        <legend>我要在梦之都学:</legend>
        <label for="WebDesign">选择一个你在梦之都最想学的</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>
    </fieldset>
    <fieldset>
        <legend>个人化信息:</legend>
        <label for="myimage">个性照片上传</label>
        <input type="file" id="myimage" name="myimage" size="35" maxlength="255" />
        <label for="contactus">联系我们</label>
        <textarea cols="50" rows="10" id="contactus" name="contactus">
            可爱的猴子 dreamdu[at]163[dot]com
        </textarea>
    </fieldset>
    <fieldset>
        <legend>提交:</legend>
        <input type="submit" value="submit" id="submit" name="submit" />
        <input type="reset" value="reset" id="reset" name="reset" />
    </fieldset>
</form>

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