【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基础知识 表单的更多相关文章
- Bootstrap<基础六> 表单
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...
- 【ASP.NET 基础】表单和控件
1.HTML表单的提交方式 对于一个普通HTML表单来说,它有两个重要的属性:action 和 method.action属性指明当前表单提交之后由哪个程序来处理,这个处理程序可以是任何动态网页或者 ...
- 玩转Django2.0---Django笔记建站基础七(表单与模型)
第七章 表单与模型 表单是搜集用户数据信息的各种表单元素的集合,作用是实现网页上的数据交互,用户在网站输入信息,然后提交到网站服务器端进行处理(如数据录入和用户登录.注册等). 用户表单是web开发的 ...
- html知识——表单
1.表单标记:<form>内容</form> 属性: name(表单名称) 必须写!!! method(传送数据方式): get--将表单的内容附加在URL地址的后面 ...
- HTML基础2 表单和框架
表单: <form id="" name="" method="post/get" action"负责处理的服务端" ...
- html基础之 表单提交方法
最普通最常用最一般的方法就是用submit type..看代码: <form name=”form” method=”post” action=”#"> <input ty ...
- 微信小程序基础之表单Form的使用
表单Form的应用很广泛,我们可以利用form设计登录注册,也可以设计一种答题问卷的形式,今天主要讲一下form的使用 form表单,将组件内输入的"switch","i ...
- javascript基础 之 表单
1,js可以验证表单 实例1,js获取表单的内容 //html表单是这样的 <form name="myForm" action="demo_form.php&qu ...
- html基础笔记-表单、链接
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 字符编码U ...
随机推荐
- cips2016+学习笔记︱简述常见的语言表示模型(词嵌入、句表示、篇章表示)
在cips2016出来之前,笔者也总结过种类繁多,类似词向量的内容,自然语言处理︱简述四大类文本分析中的"词向量"(文本词特征提取)事实证明,笔者当时所写的基本跟CIPS2016一 ...
- python︱模块加载(pip安装)以及pycharm安装与报错解决方式
每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 准备放下R开始学python,真是痛苦,因为找 ...
- 硬盘运行与“AHCI 模式”还是“IDE 模式”
如今SATA硬盘越来越流行,最新购买或者组装的电脑,基本都安装新一代的SATA硬盘,由于绝大多数BIOS初始设置是"IDE模式",安装的windows XP和vista系统,并没有 ...
- hibernate(二)主键生成策略
hibernate主键生成策略主要指的是在实体类orm的配置 <id name=""> <generator class="native"&g ...
- Complete the Word CodeForces - 716B
ZS the Coder loves to read the dictionary. He thinks that a word is nice if there exists asubstring ...
- iOS - Swift Enumerations or how to annoy Tom
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
- C# wav语音文件合并
开发完成语音播报产品,由于客户所使用的播放产品种类繁多,在使用HDMI接口播放音频时,由于采用的声卡不同,个别机器会出现播报声音过小,或者不播报的情况.所以采用将语音文件合并播放的方式,来解决此问题. ...
- 【BZOJ4554】游戏(二分图匹配,网络流)
[BZOJ4554]游戏(二分图匹配,网络流) 题解 Description 在2016年,佳缘姐姐喜欢上了一款游戏,叫做泡泡堂.简单的说,这个游戏就是在一张地图上放上若干个炸弹,看 是否能炸到对手, ...
- 【BZOJ1257】余数之和(数论分块,暴力)
[BZOJ1257]余数之和(数论分块,暴力) 题解 Description 给出正整数n和k,计算j(n, k)=k mod 1 + k mod 2 + k mod 3 + - + k mod n的 ...
- [POI2014]HOT-Hotels
题目描述 There are towns in Byteotia, connected with only roads. Each road directly links two towns. All ...