zoukankan      html  css  js  c++  java
  • HTML:文件标签(三)

    表单可以让我们将录入信息携带到服务器端。

    简单说,通过表单可以将要提交的数据提交到指定的位置。

    但一个一个的提交,不方便。

    表单正好解决了这个问题,将所有的数据形成一个整体,一起提交给服务 器。

    常见的 登录页面、注册页面 都离不开表单的应用

    1 form属性

    action:整个表单提交的目的地

    method:表单提交的方式

      get:

        提交时,传输数据量少(传递普通文字信息,传递照片会失败),

        明文提交(在浏览器的url 后面会显示提交的数据,不适合用于登录)

      post:

        提交时,传输数据量大(传递文字和图片都行),

        密文提交(浏览器的url后面看不到提交 的数据)

    2 表单中的元素(控件)

    <input>元素的type属性

      text:默认值,普通的文本输入框

        placeholder属性:提示文本

        maxlength属性:最多能输入字符数量

      password:密码输入框

      checkbox:多选框/复选框

        checked:被选中

      radio:单选按钮

      file:上传文件

      reset:重置按钮

      submit:提交按钮

      button:普通按钮

    <select>:下拉列表/下拉框

      <option>: 列表中的项

        selected:被选中

    <textarea>:文本域(多行文本框)

      可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的height 和 width 属性。

    <button>:按钮

      在form表单中,作用和submit一样

      不在form表单中,就是普通按钮(配合后期的javascript,可扩展性更高)

    <form action="baidu" method="GET">
        <p>帐号:<input name="a" type="text" placeholder="请输入帐号..."
    maxlength="5" ></p>
        <p>密码:<input name="b" type="password"></p>
        <p>爱好:
            <input name="hobby" type="checkbox"> 抽烟
            <input name="hobby" type="checkbox" checked="checked"> 喝酒
            <input name="hobby" type="checkbox"> 烫头
            <input name="hobby" type="checkbox"> 泡澡
    </p>
    <p>性别:
            <input type="radio" name="sex"><input type="radio" name="sex" checked="checked"></p>
    <p>身份:
            <input type="radio" name="role"> ceo
            <input type="radio" name="role"> cto
            <input type="radio" name="role"> coo
            <input type="radio" name="role" checked="checked"> ufo
    </p>
    <p>头像:
        <input type="file">
    </p>
    <p>血型:
        <select>
            <option>A型</option>
            <option>B型</option>
            <option>C型</option>
            <option selected="selected">O型</option>
        </select>
    </p>
    <p>个人简介:
        <textarea cols="10" rows="5"></textarea>
    </p>
    <p>
        <input type="reset" value="清空">
        <input type="submit" value="提交">
        <input type="button" value="取消">
        <button>保存</button>
    </p>
    </form>
    
    <button>测试</button>

    注意事项:

      1. 所有表单中的元素都要具有名称(否则提交到服务器之后,服务器无法区识别多个元素之间的不 同)

      2. 单选框要想可以一次只选择一个,要具有相同的name值

      3. 所有的复选框以组为单位,组内的每个复选框都应该具有相同的name值

  • 相关阅读:
    LeetCode-079-单词搜索
    awk学习笔记
    Python实现排列组合算法
    python模拟登录人人
    Python的SQLite数据库使用方法
    C语言排序算法——插入排序算法
    C语言排序算法——简单选择排序算法
    C语言排序算法——冒泡排序算法
    Python学习——python的函数参数传递
    Python学习——实现secure copy功能
  • 原文地址:https://www.cnblogs.com/JasperZhao/p/15119638.html
Copyright © 2011-2022 走看看