HTML表单设计(上)
1,表单标记<form>...</form>
<form>...</form>定义表单的开始位置和结束位置,表单提交时的内容就是<form>表单的内容
基本格式<form action =“服务器端地址(接受表单内容的地址)” name =“表单名称” method=“post/get”>...</form>
常用属性
a,name表单名称
b,method传递数据的方式,分为post和get两种方式
get方式:get方式提交时,会讲表单的内容附加在URL地址的后面,所以限制了提交的内容的长度,不超过8192字符,且不具备保密性
post方式:post方式提交时,将表中的数据的数据一并包含在表单主体中,一起传送到服务器中处理,没有数据大小限制
c,action表单数据的处理程序的URL地址,如果为空则使用当前文档的URL地址,如果表单中不需要使用action属性也要指定其属性为 “no”
d,enctype设置表单的资料的编码方式
e,target和超连接的属性类似,用来指定目标窗口
2,文本域和密码<input>标记
<input>标记没有结束标记
基本语法<input type=“” name=“” value=“” size=“” maxlength=“”>
属性介绍
a,type属性 有两个值 1,text 当type=“text”时,<input>表示一个文本输入域 2,password 当type=“password”时,<input>表示一个密码输入域
b,name属性 定义控件的名称
c,value属性 初始化值,打开浏览器时,文本框中的内容
d,size属性 设置控件的长度
e,maxlength属性 输入框中最大允许输入的字符数
3,提交,重置和普通按钮
a,当<input type=“submit”>时,为提交按钮
b,当<input type=“reset”>时,为重置按钮
c,当<input type=“botton”>时,为普通按钮
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单设计</title>
</head>
<body>
<form action="no" method="get">
帐号:<input type="text" name="name" value="" size="5" maxlength="5">
<br><br>
密码:<input type="password" name="password" value="" src="5">
<br><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
</form>
</body>
</html>
HTML表单设计(上)的更多相关文章
- UX设计秘诀之注册表单设计,细节决定成败
以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 说实话,现实生活中,又有多少人会真正喜欢填写表格?显然,并不多.因为填写表单这样的网页或App服务,并非 ...
- CSS表单设计
今天我们开始学习<十天学会web标准(div+css)>的css表单设计,包含以下内容和知识点: 改变文本框和文本域样式 用图片美化按钮 改变下拉列表样式 用label标签提升用户体验 一 ...
- SpreadJS V13.0发布,聚焦表单设计与数据交互,让您的工作效率突飞猛进!
纯前端表格控件SpreadJS,是一款成功应用于华为.招商银行.天弘基金.苏宁易购等国内外知名企业的前端开发工具,其带来的价值不仅体现在帮助开发人员在其Web应用程序中快速构建 Web Excel . ...
- 循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储
在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...
- SNF软件开发机器人-子系统-表单-表单设计
表单设计 在我们做程序时总要对表单的内容进行设计,然而对控件位置等信息的调整总是麻烦的,还常常容易出错.SNF软件机器人完美的解决了这个问题. 1.效果展示: 2.使用说明: (1)打开页面,选中开发 ...
- CURL模拟表单post提交及相关常用参数的使用(包括提交表单同时上传文件)
转载自:https://blog.csdn.net/freedomwjx/article/details/43278157 (注:在curl前面加上time如time curl xxx,可以在最后显示 ...
- 混合表单文件上传到数据库(基于TOMCAT)
在实际的开发中在实现文件上传的同时肯定还有其他信息需要保存到数据库,就像混合表单在上传完毕之后需要将提交的基本信息插入数据库. 在这个demo中需要用到这个架包来帮助实现 1.定义一个公共类实现文件上 ...
- 33个与众不同的Web表单设计
表单在web设计中很重要,因为它具有直接的用户交互.创新?有趣?富有色彩?设计一个交互,需要设计师关注登陆/注册表单的设计元素. 这里有33个与众不同的web表单设计,希望能使你获得设计灵感. 1. ...
- Web标准:九、CSS表单设计
Web标准:九.CSS表单设计 知识点: 1.改变文本框和文本域样式 2.用图片美化按钮 3.改变下拉列表样式 4.用label标签提升用户体验 1)改变文本框和文本域样式 文本框标签:<i ...
随机推荐
- MUI顶部选项卡的用法(tab-top-webview-main)
前 言 MUI是一款最接近原生APP体验的高性能前端框架,它的比较重要的功能是:下拉刷新.侧滑导航.滑动触发操作菜单和顶部(底部)选项卡等 最近用MUI做手机app应用的时候 ...
- PBOC圈存时用到3DES加密解密以及MAC计算方法
最近在做PBOC圈存时用到了3DES的加密解密以及MAC计算问题,在网上了解一些知识,复制了一些demo学习,我这里没有深入研究,只是把我用到的和了解的做个总结,便于以后使用和学习. 3DES分双倍长 ...
- 表空间tablespace,数据文件datafiles,和控制文件control files介绍
https://docs.oracle.com/cd/B19306_01/server.102/b14220/physical.htm#i5919 本文系翻译 表空间tablespace,数据文件da ...
- HDU4278 Faulty Odometerd
开始以为是容斥原理,想着做一下,应该是可以用容斥解决的,有空再过来写一下.题解是进制转换,开始没想到,不过很好理解. 如在10进制里: 1254= (1*10^3 + 2*10^2 + 5* 10^ ...
- redis性能调优笔记(can not get Resource from jedis pool和jedis connect time out)
对这段时间redis性能调优做一个记录. 1.单进程单线程 redis是单进程单线程实现的,如果你没有特殊的配置,redis内部默认是FIFO排队,即你对redis的访问都是要在redis进行排队,先 ...
- redis的sentinel主从切换(failover)与Jedis线程池自动重连
本文介绍如何通过sentinel监控redis主从集群,并通过jedis自动切换ip和端口. 1.配置redis主从实例 10.93.21.21:6379 10.93.21.21:6389 10.93 ...
- iOS将自己的框架更新到cocopods上
第一步 把自己的框架更新到github 上,为了提交地址给他人下载.这里就不详细介绍如何把项目更新到github上了 第二步 这个时候我们的项目已经挂在github上了我们需要给本地的项目新建一个Po ...
- 【特效】hover效果之十字动画
效果预览:http://www.gbtags.com/gb/rtreplayerpreview-standalone/3101.htm html: <div class="wrap&q ...
- flying-saucer + iText + Freemarker实现pdf的导出, 支持中文、css以及图片
前言 项目中有个需求,需要将合同内容导出成pdf.上网查阅到了 iText , iText 是一个生成PDF文档的开源Java库,能够动态的从XML或者数据库生成PDF,同时还可以对文档进行加密,权限 ...
- 2017上海QCon之旅总结(上)
本来这个公众号的交流消息中间件相关的技术的.这周去上海参加了QCon,第一次参加这样的技术会议,感受挺多的,所以整理一下自己的一些想法接公众号和大家交流一下. 下面进入正题,从自己参加了的一些分享中挑 ...