【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了
【HTML】 HTML基础知识 表单相关推荐
- CSS基础知识(表单标签、事件、CSS介绍、选择器、伪类选择器案例、样式、盒子模型、定位)...
一. 表单标签 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
- Django基础(11): 表单集合Formset的高级用法详解
Formset(表单集)是多个表单的集合.Formset在Web开发中应用很普遍,它可以让用户在同一个页面上提交多张表单,一键添加多个数据,比如一个页面上添加多个用户信息.今天小编我就介绍下Djang ...
- 三校生高考计算机基础知识,计算机基础知识题(单选题)(三校生历年高考真题归纳)...
精品文档 . 计算机基础知识题(单选题)2007-2018年三校生历年真题归纳 1.Reset按钮用于() A.复位启动 B.冷启动 C.中止某项操作或命令 D.检查部件是否正常 2.一个完整的计算机 ...
- 历年来计算机基础知识,计算机基础知识题单选题历年高考真题归纳.docx
精品文档 计算机基础知识题(单选题) 2007-2018 年三校生历年真题归纳 1.Reset 按钮用于( ) A.复位启动 B.冷启动 C.中止某项操作或命令 D.检查部件是否正常 2.一个完整的计 ...
- 【前端基础】表单标签/提交
[前端基础]表单标签/提交 表单标签 1. 表单的介绍 2. 表单相关标签的使用 3. 小结 表单提交 1. 表单属性设置 2. 表单元素属性设置 3. 示例代码 小结 表单标签 学习目标 能够知道表 ...
- Vue基础之表单控件绑定
你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户的输入事件以更新数据, ...
- JavaScript基础-form表单验证
表单验证的两种方式: 一.使用alert提示框 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"& ...
- 高职单招计算机基础知识,高职单招计算机类考试复习材料.doc
高职单招计算机类考试复习材料 高职单招计算机类考试复习材料 一.计算机基础知识 1.计算机的发展及应用 了解计算机系统硬件发展的四代划分及各代的主要特征. 一.第一代(1946~1958):电子管数字 ...
- PHP基础——处理表单
处理表单 来自PHP之外的变量,HTML表单(GET和POST) Example #1 一个简单的 HTML 表单 <!DOCTYPE html> <html lang=" ...
最新文章
- 网站错误记录:A transport-level error has occurred when sending the request to the server.
- c++获取当前目录_如何在 Linux 下利用 Vim 搭建 C/C++ 开发环境?
- oc中在控件上显示图片
- UVa1368 - DNA Consensus String(贪心算法)
- getjsonobject字符串解析出错_【干货分享】达梦DISQL工具使用解析之 DISQL环境变量设置...
- springboot抑制log中的info信息
- iphone图片编辑画笔_苹果超强新功能上线!它打开了 iPhone 摄影的新大门
- wpgcms---列表页数据渲染
- rfc 查看工具_用于系统管理员的杀手级工具,Skype替代品,提高Linux技能,6个必读的RFC等
- php 中间表统计,多对多中间表详解
- html cellpadding属性,HTML table标签 cellpadding 属性
- bootstrp_组件
- 微信小程序input使用
- 微积分:如何理解多元函数可微和全微分?
- VCRedist.exe静默安装方法(转)
- TED地道用语学习 - <脆弱的力量> - 3
- 一场青岛式婚礼的诞生(青岛民俗)
- python定义接口的关键字_使用*args和**kws指定关键字参数
- kali安装Netspeed
- SAP中销售处理到期发票清单VF04功能的应用