zoukankan      html  css  js  c++  java
  • 【HTML】 HTML基础知识 表单

    html 表单

      表单的标签是<form>,用于给网站的后台提交数据。提交的数据格式原本是什么样不太清楚,以python的flask框架来看,我从表单中得到的数据是一个字典(flask.request.form),可以从中获取到表单中提交上来的数据。字典的键是各个表单元素的name属性的值,值则是用户的输入。

    ■  <form>

      form本身具有一些属性,比如action指定了一个url,就是当把表单中的数据提交上去后由url指定的程序来处理这些数据。这个指定的程序可以是一个.php脚本之类的文件,也可以是比如flask框架中的一个路径处理函数。其他属性还有:

      action  指定了一个程序来处理

      method  指定这个表单的提交方法,可选post,get等

      target  指定action中的url的目标

      name  指定一个表单的名称

      等等

    ■  <input>

      基本的表单组件很多都是input标签,不同的是其type属性的值。type属性的值决定了这个表单元素到底是个什么东西。比如:

      <input type="text" value="default_text" name="test_text" maxlength="设置输入最长长度" size="设置本身输入框长度" />  一个明文输入框,默认值是default_text

      <input type="password" name="test_passwd" maxlength="..." size="..." />  一个密码输入框

      <input type="submit" value="按钮上显示的文字" name="test_submit" />  一个提交按钮,按下提交按钮后提交整个表单的数据到服务器,和submit类似的,若type是个reset则是个清空按钮

      <input type="radio" name="group1" value="radio_info" checked>some label text</input>  一个单选项,对于多个单选项,所有name一样的属于同一个组,一个组的所有选项只能有一个被选中,value是提交数据时该单选项的值,checked标识了该选项被选中,如果同一组内多个radio都有checked的话以最后设置的那个为准。某个radio没有选的话就不会传这个元素的键值对到后端去。

      <input type="checkbox" name="group2" value="check_info" checked>some label text</input>  一个复选框,属性和radio类似,但是不存在一个组只能选一个,value属性写的一些信息,作为这个复选框元素的值随其他数据一起提交到后端。没有选的话同样不传数据

      <input type="number" name="quantity" min="1" max="5">  一个数字输入框,可以设置最小值和最大值

      <input type="file" id="file_id" name="file_name">  构造一个文件上传的部件(具体怎么上传,如何和后端互动还不清楚)

      以上是经典html中的一些input类型,html5中支持更多类似于日期,颜色等的input。http://www.w3school.com.cn/html/html_form_input_types.asp

      此外,input标签还有很多单独的属性用来设置它的一些特性,比如上面的单选多选框中提到的checked属性,除了checked还有:

        readonly  设置某个input只读不可编辑

        disabled  设置某个input不可用不可编辑

        size,maxlength这些属性上面提到过了,就不说了

    ■  其他表单元素

      上面提到了input,input已经有很多表单元素的形式了,除了那些input,我们还有以下一些元素

      <select>  下拉列表,里面要添加<option>,option可以设置selected,value等属性,提示用文字写在option里面

      <select multiple>  多选框列表

    <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
    </select>

      <textarea>  多行文本框,可以设置属性诸如name,rows,cols等(rows和cols指定初始状态的行列数),也可以设置disabled,readonly,maxlength等

      <button>  独立按钮,可以设置onclick等属性が,反正要用jQuery的话就无所谓onclick了

  • 相关阅读:
    【BZOJ1030】文本生成器
    luogu P1312 Mayan游戏
    luogu P1074 靶形数独
    【题解】 [HNOI2009] 最小圈 (01分数规划,二分答案,负环)
    【题解】 [HEOI2016]排序题解 (二分答案,线段树)
    【题解】 Luogu P1541 乌龟棋总结 (动态规划)
    【题解】Luogu P2047 社交网络总结 (Floyd算法,最短路计数)
    【总结】最短路径条数问题
    第一天进入博客这个神奇的领域 在此%%%erosun
    什么是Kubernetes?
  • 原文地址:https://www.cnblogs.com/franknihao/p/6672690.html
Copyright © 2011-2022 走看看