• 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>

    (暂时到这里...)

  • 相关阅读:
    yum 下载安装包以及依赖包
    《将博客搬至CSDN》
    Lucene
    Solr
    LVS原理详解(3种工作模式及8种调度算法)
    正向代理与反向代理
    网关,网卡
    NAT地址转换
    Nginx学习总结
    网络_OSI模型_数据包传输
  • 原文地址:https://www.cnblogs.com/lzh739887959/p/5740593.html
Copyright © 2020-2023  润新知