zoukankan      html  css  js  c++  java
  • HTML表单的运用

    1.表单标签

      <form>标签用于为用户输入创建HTML表单。

        语法:

        <form action="服务器程序URL" method="get|post" enctype="MIME信息" target="文档显示的方式">表单详细设置</form>

    属性解释:

      action:指定一来处理提交表单的格式。

      method:指明提交表单的HTTP方法。可能值为:post:记入;登记;计算机启动时一系列的自动检查(提交到后台);get:取得指令,获取文件(提交当前页面,不安全)

      enctype:指明用来把表单提交给服务器时(当method值为“post”)的互联网媒体形式。

      target:指定提交的结果文档显示的位置:_blank:在一个新的、无名浏览器窗口调入指定的文档;_self:在指定这个目标的元素的相同的框架中调入文档;_parent:把文档

          调入当前框的直接的父frameset框中;_top:把文档调入原来的最顶部的浏览器窗口中。

    代码如下:

    <form action="login.php" method="post" target="_blank">...</form>

    2.表单域

    input元素所有type类型如下:(详情可见博文《HTML5的表单所有TYPE类型》)

    表单其他元素的其他:

    1).textarea(多行文本框)

    代码如下:

    <rextarea name="content" rows="5" cols="50"></textarea>

    属性说明:

    name:元素的名称。

    rows:指定文本框的高度。

    cols:指定文本框的宽度。

    2).select(下拉框)

    代码如下:

    <form action="#" method="post">
        <h4>下拉的效果:</h4>
        地区:
        <select name="area">
            <option value="1">北京</option>
            <option value="2" selected>广州</option>
            <option value="3">上海</option>
            <option value="4">黑龙江</option>
        </select>
    
        <h4>多选的效果:</h4>
        地区:
        <select name="area" size="3" multiple>
           <option value="1">北京</option>
            <option value="2" selected>广州</option>
            <option value="3">上海</option>
            <option value="4">黑龙江</option>
        </select><br>这里size="3"表示这个选择框里显示三行

    属性说明:

    size 定义下拉选择框的行数
    name 定义下拉选择框的名称
    multiple 表示可以多选,如果不设置本属性,那么只能单选
    value 定义选择项的值
    selected 表示默认已经选择本项
    disabled 是否禁用

    分组标签<opgrounp>:

    代码如下:

    <form action="#" method="post">
        地区:
        <select name="area" size=""3 multiple>
            <optgroup label="国内"
                <option value="1">北京</option>
                <option value="2" selected>广州</option>
                <option value="3">上海</option>
                <option value="4">黑龙江</option>
            </optgroup>
            <optgroup label="国外"
                <option value="1">纽约</option>
                <option value="2" selected>巴黎</option>
                <option value="3">莫斯科</option>
                <option value="4">墨尔本</option>
            </optgroup>
        </select>

    属性说明:

    label属性:定义选项组合的名字。

    3).其他标签

    <fieldset>标签作用是吧表单中元素组合起来。

    <legend>标签为fieldset元素定义标题(caption)

    代码如下:

    <fieldset>
        <legend>注册</legend>
        <form name="form" action="#" method="post">
            用户名:<input type="text" name="username">
            密码:<input type="password" name="pas">
            <input type="submit" name="sub" value="提交">
        </form>
    </fieldset>

    <label>标签为input元素定义标注(标记)。它的作用是将输入项或选项及其标签文字关联起来。

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

    代码如下:

    <input type="radio" name="sex" value="1" id="man">
    <label for="man"></label>
    <input type="radio" name="sex" value="0" id="woman">
    <label for="woman"></label>

    (暂时到这里...)

  • 相关阅读:
    html5快速入门(四)—— JavaScript
    SJPullDownMenu下拉菜单框架使用
    HTML5快速入门(三)—— 标签综合运用
    html5快速入门(二)—— CSS简介
    html5快速入门(一)—— html简介
    Robotium测试套管理测试用例
    从GitHub远程仓库中删除文件夹或文件
    上传本地代码到GitHub
    Jenkins关联GitHub进行构建
    Jenkins忘记用户名密码
  • 原文地址:https://www.cnblogs.com/lzh739887959/p/5740593.html
Copyright © 2011-2022 走看看