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了

【HTML】 HTML基础知识 表单相关推荐

  1. CSS基础知识(表单标签、事件、CSS介绍、选择器、伪类选择器案例、样式、盒子模型、定位)...

    一. 表单标签 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...

  2. Django基础(11): 表单集合Formset的高级用法详解

    Formset(表单集)是多个表单的集合.Formset在Web开发中应用很普遍,它可以让用户在同一个页面上提交多张表单,一键添加多个数据,比如一个页面上添加多个用户信息.今天小编我就介绍下Djang ...

  3. 三校生高考计算机基础知识,计算机基础知识题(单选题)(三校生历年高考真题归纳)...

    精品文档 . 计算机基础知识题(单选题)2007-2018年三校生历年真题归纳 1.Reset按钮用于() A.复位启动 B.冷启动 C.中止某项操作或命令 D.检查部件是否正常 2.一个完整的计算机 ...

  4. 历年来计算机基础知识,计算机基础知识题单选题历年高考真题归纳.docx

    精品文档 计算机基础知识题(单选题) 2007-2018 年三校生历年真题归纳 1.Reset 按钮用于( ) A.复位启动 B.冷启动 C.中止某项操作或命令 D.检查部件是否正常 2.一个完整的计 ...

  5. 【前端基础】表单标签/提交

    [前端基础]表单标签/提交 表单标签 1. 表单的介绍 2. 表单相关标签的使用 3. 小结 表单提交 1. 表单属性设置 2. 表单元素属性设置 3. 示例代码 小结 表单标签 学习目标 能够知道表 ...

  6. Vue基础之表单控件绑定

    你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户的输入事件以更新数据, ...

  7. JavaScript基础-form表单验证

    表单验证的两种方式: 一.使用alert提示框 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"& ...

  8. 高职单招计算机基础知识,高职单招计算机类考试复习材料.doc

    高职单招计算机类考试复习材料 高职单招计算机类考试复习材料 一.计算机基础知识 1.计算机的发展及应用 了解计算机系统硬件发展的四代划分及各代的主要特征. 一.第一代(1946~1958):电子管数字 ...

  9. PHP基础——处理表单

    处理表单 来自PHP之外的变量,HTML表单(GET和POST) Example #1 一个简单的 HTML 表单 <!DOCTYPE html> <html lang=" ...

最新文章

  1. 网站错误记录:A transport-level error has occurred when sending the request to the server.
  2. c++获取当前目录_如何在 Linux 下利用 Vim 搭建 C/C++ 开发环境?
  3. oc中在控件上显示图片
  4. UVa1368 - DNA Consensus String(贪心算法)
  5. getjsonobject字符串解析出错_【干货分享】达梦DISQL工具使用解析之 DISQL环境变量设置...
  6. springboot抑制log中的info信息
  7. iphone图片编辑画笔_苹果超强新功能上线!它打开了 iPhone 摄影的新大门
  8. wpgcms---列表页数据渲染
  9. rfc 查看工具_用于系统管理员的杀手级工具,Skype替代品,提高Linux技能,6个必读的RFC等
  10. php 中间表统计,多对多中间表详解
  11. html cellpadding属性,HTML table标签 cellpadding 属性
  12. bootstrp_组件
  13. 微信小程序input使用
  14. 微积分:如何理解多元函数可微和全微分?
  15. VCRedist.exe静默安装方法(转)
  16. TED地道用语学习 - <脆弱的力量> - 3
  17. 一场青岛式婚礼的诞生(青岛民俗)
  18. python定义接口的关键字_使用*args和**kws指定关键字参数
  19. kali安装Netspeed
  20. SAP中销售处理到期发票清单VF04功能的应用

热门文章

  1. SolrCloud7.4(Jetty容器)+mysql oracle 部署与应用
  2. Java双等号,Equals(),HashCode()小结
  3. linux -cpu
  4. Raider对F#支持的技术细节
  5. 《PHP和MySQL Web开发从新手到高手(第5版)》一一第1章 安装
  6. 输入控件tagsinput
  7. WinAPI: Ellipse - 绘制椭圆
  8. 精彩十年(2)——阴沟里也翻船
  9. squid完全攻略(一)squid优化后详细安装步骤
  10. flink的print()函数输出的都是对象地址而非对象内容