zoukankan      html  css  js  c++  java
  • WEB前端第五课——HTML表单

    1.<iframe></iframe>标签

      iframe(inner frame)为内联框架,iframe元素是可以创建包含另外一个文档的行内框架,是body 的子集

      常用属性:

    • width  设置内联框架的宽度
    • height  设置内联框架的高度
    • name  设置框架的名称
    • src  设置页面内容的路径
    • scrolling  规定在iframe中是否显示滚动条(yes/no/auto)
    • frameborder  规定是否显示iframe边框(1默认有边框,0)

      iframe语法示例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>iframe框架测试</title>
    </head>
    <body>
        <iframe src="" name="topframe" frameborder="0"  width="100%" height="300px" >需要的文本</iframe>
        <a href="http://www.baidu.com" target="topframe">百度</a>
        <a href="http://www.sina.com.cn" target="topframe">新浪</a>
    </body>
    </html>
    <!--  ########################################################################################################  -->
    <body>
    <iframe src="0718水平导航栏.html" name="topframe" frameborder="1px" width="1570px" height="100px" ></iframe>
    <iframe src="z-test.html" name="leftframe" frameborder="1px" width="266px" height="670px"></iframe>
    <iframe src="0718展示网页.html" name="rightframe" frameborder="1px" width="1300px" height="670opx"></iframe>
    </body>

    2.<form></form>标签

      form标签用于创建HTML表单,表单一般应该包含用户填写信息的输入框和提交信息的按钮,即控件

      常用属性:

      name,表单提交时的名称

      action,提交表单的目标地址URL

      method,表单提交方式,规定用于发送form-data的HTTP方法,参数值包括 get 和 post,默认未get

          get和post的区别:

              get提交的数据URL中可以看到,post看不到

              get一般用于提交少量数据,post用来提交大量数据

              get最多提交1K数据,post理论上没有限制

              get提交的数据在浏览器历史记录中,安全性不好,但速度相对较快

      enctype,规定发送表单数据到服务器之前如何对其进行编码,

            属性值包含"multipart/form-data"(不对字符编码)、“application/x-www-form-urlencoded”(对所有字符编码)、text/plain(空格转换为“+”但不对特殊字符编码)

    3.form表单常用元素input

      input为单标签,<input type="" name="" value=""/>,常用属性:

      type(默认为text)

        text,定义单行文本输入字段,默认宽度为20个字符

        password,定义密码字段,该字段中的字符被掩码

        button,定义可点击的按钮,多数情况下用于启动JavaScript脚本

        checkbox,定义复选框

        radio,定义单选按钮,必须通过相同的name属性值来达到单选的控制效果

        submit,定义提交按钮,提交按钮会把表单数据发送到服务器

        reset,定义重置按钮,重置按钮会清除表单中所有数据

        image,定义图像形式的提交按钮

        hidden,定义隐藏的输入字段

        file,定义输入字段和“浏览”按钮,供文件上传

         ★★type值为file时的input要注意以下几点:

          form表单的method值要为post

          form属性必须设置enctype="multipart/form-data",不对字符编码,这个属性说明文件以二进制方式传输,因为计算机最底层是以二进制显示和传输

            enctype默认属性值为“application/x-www-form-urlencoded”,在表单数据发送前对所有字符编码

          语法示例:

    <form action="" name="" method="post" enctype="multipart/form-data">
            <input type="file" name="bigfile">
    </form>
    

      name,input元素的名称

      value,规定input元素的值

      width / height,设置input字段宽度/高度,适用于“type=image”

      checked,规定次input元素在首次加载时默认选中

      readonly,规定input字段为只读项

      required,规定input字段为必填项

    4.<select></select>标签,创建下拉框

      语法示例

        <select name="">
            <option value="">显示文本</option>
            <option value="">显示文本</option>
            <option value="">显示文本</option>
        </select>
    

      <select>常用属性:

        name,规定下拉列表的名称

        size,规定下拉列表中每屏可见选项的数目

        mutiple,规定可选多个选项

        disabled,规定禁用该下拉列表

        required,规定字段为必填项

      <option>常用属性:

        value,定义<option>选项的值,与显示文本不同,value值是真正发送至服务器的内容

        select,规定首次进入页面时,默认选中该项option

      <optgroup>可以作为<option>的父级元素配合使用,label是optgroup的必须属性,用于描述选项组或命名

    5.<textarea></textarea>多行文本框标签

      常用属性:

      name,定义文本区的名称

      cols,定义文本区内的可见宽度

      rows,定义文本区内的可见行数

      wrap,定义在表单提交时,文本区域中的文本如何换行

         有hard和soft两个属性值,

         wrap=“hard”,提交表单时,textarea中的文本换行(包含换行符),此时必须规定“cols”属性值

         wrap=“soft”,提交表单时,textarea中的文本不换行,wrap的默认值为soft

    6.<label></label>标签为input元素定义标注

      <label>是input的描述,本身不具有特定效果,但和<input>标签配合使用可以提升用户体验,用户不用必须点击到按钮,而是点击文字也可以选中,如记住密码复选框、性别单选按钮等

      使用方法由两种:一种是<label>标签直接包裹<input>标签,另一种是通过<label>的for属性指向按钮的id进行绑定(for和id的属性值必须相同)

      语法示例:

        <form>
            <label for="male">Male</label>
            <input type="radio" name="sex" id="male"/>
            <label for="female">Female</label>
            <input type="radio" name="sex" id="female"/>
        </form>
        或者 <br/>
        <form>
            <label><input type="radio" name="sex">Male</label>
            <label><input type="radio" name="sex">Female</label>
        </form>
    

    7.<fieldset></fieldset>标签可将表单内的相关元素分组,是块级元素

      通常和<legend>标签一起使用,legend用于定义fieldset的提示信息

      语法示例:

        <fieldset>
            <legend>健康信息</legend>
            身高:<input type="text"><br>
            体重:<input type="text">
        </fieldset>
    

      

  • 相关阅读:
    解决VMwave下卡死的办法
    深度探索C++对象模型第四章:函数语义学
    cc
    tbb库的使用
    10内核同步方法
    哈希
    django 和restful framework 初始配置轻松搞定
    linux有趣动画--代码雨
    linux有趣开机图标--佛祖保佑
    Socket是什么,通俗易懂点说
  • 原文地址:https://www.cnblogs.com/husa/p/13329349.html
Copyright © 2011-2022 走看看