HTML基础(五)表单
表单的工作原理
简单来说就是客户在浏览器输入信息之后,浏览器将用户在表单中的数据进行打包发送给服务器,服务器接收到之后进行处理,如下图
语法
<form>
表单元素
</form>
form标签的属性
常用的表单元素以下这些
<input /> 表单输入标签
<select > 菜单和列表标签
<option > 菜单和列表项目标签
<textarea > 文字域标签
<optgroup> 菜单和列表项目分组标签
input标签
语法
<input type="类型属性" name="名称" .... />
常用的type的类型属性都有
text 文字域
password 密码域
file 文件域
checkbox 复选域
radio 单选域
button 按钮
submmit 提交按钮
reset 重置按钮
hidden 隐藏域
image 图像域
写一个简单的用户名密码和提交按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>表单</title>
</head>
<body>
<form>
姓名:<input type="text" name="userName" />
密码:<input type="password" name="pwd" />
<input type="submit" />
</form>
</body>
</html>
打开上面的页面输入密码,发现密码是密文显示,我们见过,密码框后面有个小眼睛,点击之后就变成了明文,其实很简单,只是把type的属性password换成了text,后面学到js的时候,就能很容易的做出来这种效果
单行文本域的属性
name 文字域的名称
maxlength 指用户输入的最大字符长度
size 指定文本框的宽度,默认20个字符
value 指定文本框内的默认值
placeholder 规定用户填写输入字段的提示,文本框内浅灰色显示
完成以下的表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>表单</title>
</head>
<body>
<h1 align="center">表单提交</h1>
<hr color="#336699">
<form>
<table align="center">
<tr>
<td>姓名:</td>
<td><input type="text" name="userName" size="25" maxlength="6" placeholder="请输入姓名" /></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" name="email" value="qq.com"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" placeholder="请输入密码" /></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" placeholder="请再次输入密码" /></td>
</tr>
<tr>
<td>上传文件:</td>
<td><input type="file" name="upFile" /></td>
</tr>
<tr>
<td>性别:</td>
<td>
<!-- name值相同才是单选,会将选中的value值提交到服务器,有checked的是默认选中的-->
男<input type="radio" name="sex" value="man" checked/>
女<input type="radio" name="sex" value="woman" />
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<!--复选框的name最好是相同(方便区分是哪组复选框),当然不同也可以,value是将选中的复选框提交给服务器的-->
唱歌<input type="checkbox" name="dx" value="sing"/>
跳舞<input type="checkbox" name="dx" value="dance"/>
读书<input type="checkbox" name="dx" value="read"/>
</td>
</tr>
<tr>
<td></td>
<td>
<!--button主要配置js来完成提交表单数据的功能-->
<input type="submit" name="sub" value="点我"/>
<input type="button" name="but" value="来点我" />
<input type="reset" name="res" value="reset" />
</td>
</tr> </table>
</form>
</body>
</html>
图像域
图像域是做什么的呢?我们发现上面的提交按钮都非常的丑陋,如果可以换一张 漂亮的图片也实现提交的功能,那多好呢,这时候就要用到图像域了
语法
<input type="image" name="..." src="data:imageurl" />
隐藏域
如果我们想往服务器上发送一些东西,但是不想让用户看到,这时候就要用到隐藏域了
语法
<input type="hidden" name="..." value="提交到服务器的信息">
下拉菜单和列表选项
语法
<select>
<option value="提交服务器的值">内容</option>
<option value="提交服务器的值">内容</option>
<option value="提交服务器的值">内容</option>
</select>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<form>
<select>
<!-- value是选中之后提交到服务器的值-->
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="zj">浙江</option>
<option value="gs">甘肃</option>
<option value="lz">兰州</option>
<option value="ln">陇南</option>
<option value="am">澳门</option>
<option value="xg">香港</option>
</select>
</form>
</body>
</html>
上面的代码运行后,发现只能选择一个,而且页面只显示了一个选项,如果想选多项就要了解下select的属性了
select的属性
name 设置下拉菜单和列表的名称
multiple 设置可选择多个选项
size 设置列表中可见选项的数目
option的属性
selected 设置选项默认选中状态
value 定义送往服务器的选项值
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<form>
<select>
<!-- value是选中之后提交到服务器的值-->
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="zj">浙江</option>
<option value="gs">甘肃</option>
<option value="lz">兰州</option>
<option value="ln" selected>陇南</option>
<option value="am">澳门</option>
<option value="xg">香港</option>
</select> <hr> <select size="4" multiple>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="zj">浙江</option>
<option value="gs">甘肃</option>
<option value="lz">兰州</option>
<option value="ln">陇南</option>
<option value="am">澳门</option>
<option value="xg">香港</option>
</select>
</form>
</body>
</html>
下拉分组
上面的几种方法已经可以满足我们的大多数要求,但是如果我们想要达到下面的效果怎么办
这时候就要用到分组optgroup了
语法
<select size="8" multiple>
<optgroup label="分组名">
<option value="...">内容</option>
<option value="...">内容</option>
<option value="...">内容</option>
<option value="...">内容</option>
</optgroup>
<optgroup label="分组名">
<option value="...">内容</option>
<option value="...">内容</option>
<option value="...">内容</option>
<option value="...">内容</option>
</optgroup>
</select>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<form> <select size="8" multiple>
<optgroup label="中国">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="zj">浙江</option>
<option value="gs">重庆</option>
</optgroup>
<optgroup label="甘肃">
<option value="lz">兰州</option>
<option value="ln">陇南</option>
<option value="am">陇西</option>
<option value="xg">陇北</option>
</optgroup>
</select>
</form>
</body>
</html>
多行文本域textarea
有时候我们要在文本框里输入大段的文字怎么办,这时候input已经不能满足我们的需求了,我们就要使用textarea
语法
<textarea name="..." rows="..." cols="...">默认值</textarea>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<form>
<textarea>我说你</textarea>
</form>
</body>
</html>
点我
上面的代码是没有任何属性时的效果,大多数情况下我们都要给添加下属性
textera的属性
name 设置文本区的名称
placeholder 设置文本框内的提示,浅灰色
rows 设置文本框的可见行数
cols 设置文本框的可见宽度
给上面的代码添加上属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<form>
<textarea placeholder="请输入介绍" rows="6" cols="80"></textarea>
</form>
</body>
</html>
HTML基础(五)表单的更多相关文章
- Bootstrap<基础六> 表单
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...
- Vue学习计划基础笔记(五) - 表单输入绑定、组件基础
表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...
- [jQuery学习系列五 ]5-Jquery学习五-表单验证
前言最近总是有一个感觉,虽然这些东西都自己学习并一个案例一个案例的去验证过了.但是总觉得不写成博客记录下来这些都不是自己的东西(心理作用,哈哈).所以每当学习或者复习相关的知识我都喜欢记录下来,下面开 ...
- 【ASP.NET 基础】表单和控件
1.HTML表单的提交方式 对于一个普通HTML表单来说,它有两个重要的属性:action 和 method.action属性指明当前表单提交之后由哪个程序来处理,这个处理程序可以是任何动态网页或者 ...
- 玩转Django2.0---Django笔记建站基础七(表单与模型)
第七章 表单与模型 表单是搜集用户数据信息的各种表单元素的集合,作用是实现网页上的数据交互,用户在网站输入信息,然后提交到网站服务器端进行处理(如数据录入和用户登录.注册等). 用户表单是web开发的 ...
- HTML基础2 表单和框架
表单: <form id="" name="" method="post/get" action"负责处理的服务端" ...
- html基础之 表单提交方法
最普通最常用最一般的方法就是用submit type..看代码: <form name=”form” method=”post” action=”#"> <input ty ...
- BootStrap 智能表单系列 五 表单依赖插件处理
这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...
- 【HTML】 HTML基础知识 表单
html 表单 表单的标签是<form>,用于给网站的后台提交数据.提交的数据格式原本是什么样不太清楚,以python的flask框架来看,我从表单中得到的数据是一个字典(flask.re ...
- 微信小程序基础之表单Form的使用
表单Form的应用很广泛,我们可以利用form设计登录注册,也可以设计一种答题问卷的形式,今天主要讲一下form的使用 form表单,将组件内输入的"switch","i ...
随机推荐
- JAVA基础--面向对象09
一.适配器设计模式 1.适配器模式 adapter:适配器: 电脑电源适配器:作用:转换电压,将不符合使用要求的220伏特的市电转换成我们电脑可以使用的电压: 适配器:将不符合使用要求的东西转换成符合 ...
- poj3069【贪心,水】
妈蛋,题意看错-看了挑战时被标记的点还是给出的点,瞎搞了半个多小时... = =都想气的扔进水题系列了 #include <iostream> #include <cstdio> ...
- PTA 2-1 列出连通集【DFS+BFS基础】
给定一个有N个顶点和E条边的无向图,请用DFS和BFS分别列出其所有的连通集.假设顶点从0到N−1编号.进行搜索时,假设我们总是从编号最小的顶点出发,按编号递增的顺序访问邻接点. 输入格式: 输入第1 ...
- hdoj1097
好久没有遇到过这样的题,似乎记得以前完全就是靠规律啊什么的.... 然后刚刚看到,这不就是快速幂取膜就好了嘛- #include <stdio.h> #include <string ...
- poj 3648 Wedding【2-SAT+tarjan+拓扑】
看错题*n,注意是输出新娘这边的-- 按2-SAT规则连互斥的边,然后注意连一条(1,1+n)表示新娘必选 然后输出color[belong[i]]==color[belong[1+n(新娘)]]的点 ...
- loj#2541. 「PKUWC2018」猎人杀
传送门 思路太清奇了-- 考虑容斥,即枚举至少有哪几个是在\(1\)号之后被杀的.设\(A=\sum_{i=1}^nw_i\),\(S\)为那几个在\(1\)号之后被杀的人的\(w\)之和.关于杀了人 ...
- (025)[系统故障]XP下禁止将串口设备识别成鼠标(转)
很多人都遇到过这种问题:Windows XP启动时将一台连续发送数据的串口设备识别成串口鼠标,自动安装了串口鼠标驱动,而设备因此无法正常工作,而光标则无规律地到处跑.对此问题,Internet上的方法 ...
- [在读]HTML5程序设计(第二版)
去年买的,看了30%不到,之后一直是搁置状态,内容还不错,确确实实纯粹讲H5的.
- Sublime3注册码和安装中文包
1.Sublime3注册码 在工具栏Help中点击Enter license,粘贴下面一大串 —– BEGIN LICENSE —– Michael Barnes Single User Licens ...
- MySQL执行带out的存储过程
CALL `sp_sys_get_code`(3,'sys_customer',@code); SELECT @code