HTML表单设计
一、表单标记
<form>...</form>
<form></form>定义表单的开始位置和结束位置,表单提交时的内容就是<form>表单中的内容
基本格式:
<form action=“服务器端地址(接受表单内容的地址)” name=“表单名称” method=“post|get”>...</form>
常用属性:
name 表单名称
method 传送数据的方式,分为post和get两种方式
get方式:get方式提交时,会将表单的内容附加在url地址的后面,所以限制了提交的内容的长度,不超过8192个字符,且不具备保密性
post方式:post方式提交时,将表单中的数据一并包含在表单主体中,一起传送到服务器中处理,没有数据大小限制
action 表单数据的处理程序的url地址,如果为空则使用当前文档的url地址,如果表单中不需要使用action属性也要指定其属性为“no”
enctype 设置表单的资料的编码方式
target 和超链接的属于类似,用来指定目标端口
二、文本域和密码
<input>标记没有结束标记
基本语法:
<input type="" name="" value="" size="" maxlength="">
属性介绍:
type
text 当type=“text”时,<input>表示一个文本输入域
password 当type=“password”时,<input>表示一个密码输入域
name 定义控件的名称
value 初始化值,打开浏览器时,文本框中的内容
size 设置控件的长度
maxlength 输入框中最大允许输入的字符数
三、提交、重置、普通按钮
1.提交按钮
当<input type="submit">时,为提交按钮
2.重置按钮
当<input type="reset">时,为重置按钮
3.普通按钮
当<input type="button">时,为普通按钮
四、单选框和复选框
1.单选按钮
当<input type="redio">时,为单选按钮
2.复选框
当<input type="checkbox">时,为复选框
3.注意
单选框和复选框都可以使用“checked”属性来设置默认选中项
五、隐藏域
当<input type="hidden">时,为隐藏表单域
六、多行文本域
用法:使用<textarea>标记可以实现一个,能够输入多行文本的区域
格式:
<textarea name="name" rows="value" cols="value" value="value">... ...</textarea>
rows属性和cols属性分别用来指定,显示的行数和列数,单位是字符个数
七、菜单下拉列表域
语法格式:
<select name="" size="value" multiple>
<option value="value" selected>选项1</option>
<option value="value">选项2</option>
<option value="value">选项3</option>
... ...
</select>
属性:
multiple 设置可以多选
value 设置传送的数据
option标记:
<option>标记用来指定列表中的一个选项,需要放在<select></select>之间
selected 指定默认的选项
<html>
<head>
<title>表单设计</title>
<meta charset="utf-8">
</head>
<body>
<form>
账号:<input type="text" name="zhanghao" value="" size="10" maxlength="5">
<br>
<br>
密码:<input type="password" value="" name="mima" size="10">
<br>
<br>
<input type="hidden" value="隐藏的内容" name="mihiddenma" size="10"> 爱好:<input type="checkbox" name="tiyu" checked="checked">体育<input type="checkbox" name="changge">唱歌
<br>
<br>
性别:<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女
<br>
<br>
自我介绍:<br>
<textarea cols="35" rows="10" name="ziwojieshao">
这里是自我介绍
</textarea>
<br>
<br>
地址:
<select name="dizhi">
<option value="sichuan">四川</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
<br>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
</form>
</body>
</html>
HTML表单设计的更多相关文章
- HTML表单设计(上)
1,表单标记<form>...</form> <form>...</form>定义表单的开始位置和结束位置,表单提交时的内容就是<form> ...
- SNF软件开发机器人-子系统-表单-表单设计
表单设计 在我们做程序时总要对表单的内容进行设计,然而对控件位置等信息的调整总是麻烦的,还常常容易出错.SNF软件机器人完美的解决了这个问题. 1.效果展示: 2.使用说明: (1)打开页面,选中开发 ...
- UX设计秘诀之注册表单设计,细节决定成败
以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 说实话,现实生活中,又有多少人会真正喜欢填写表格?显然,并不多.因为填写表单这样的网页或App服务,并非 ...
- 33个与众不同的Web表单设计
表单在web设计中很重要,因为它具有直接的用户交互.创新?有趣?富有色彩?设计一个交互,需要设计师关注登陆/注册表单的设计元素. 这里有33个与众不同的web表单设计,希望能使你获得设计灵感. 1. ...
- CSS表单设计
今天我们开始学习<十天学会web标准(div+css)>的css表单设计,包含以下内容和知识点: 改变文本框和文本域样式 用图片美化按钮 改变下拉列表样式 用label标签提升用户体验 一 ...
- Web标准:九、CSS表单设计
Web标准:九.CSS表单设计 知识点: 1.改变文本框和文本域样式 2.用图片美化按钮 3.改变下拉列表样式 4.用label标签提升用户体验 1)改变文本框和文本域样式 文本框标签:<i ...
- SpreadJS V13.0发布,聚焦表单设计与数据交互,让您的工作效率突飞猛进!
纯前端表格控件SpreadJS,是一款成功应用于华为.招商银行.天弘基金.苏宁易购等国内外知名企业的前端开发工具,其带来的价值不仅体现在帮助开发人员在其Web应用程序中快速构建 Web Excel . ...
- 循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储
在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...
- jquery 实现动态表单设计
只是实现了前台页面的动态表单的设计,并未实现后台绑定数据到数据库等功能.技术使用到的为jquery和bootstrap.俗话说有图有真相,先说下具体效果如下: 点击添加一个面板容器: 容器添加成功: ...
随机推荐
- iPhone HTTP获得XML并使用GDataXML解析
1. [代码][C/C++]代码 NSURL *url = [NSURL URLWithString: @"http://www.raywenderlich.com/downloa ...
- RAC环境下oracle实例启动问题:ora-01565,ora-17503
今天有现场因为突然听电,数据库服务器停了,需要我远程重启一下. 现场是RAC环境,oracle10.2.0.4. 登录后,startup,报错如下 根据报错,初步判断是共享数据文 ...
- H3C-端口镜像
本地端口镜像配置举例 配置Switch: <Sysname> system-view [Sysname] mirroring-group 1 local # 创建本地镜像组 [Sysnam ...
- CodeForces813E:Army Creation (主席树---上一题的加强版)
As you might remember from our previous rounds, Vova really likes computer games. Now he is playing ...
- JQ对象和原生DOM对象
相同点:两者本质上都是DOM元素. 不同点:JQ对象是在原生DOM对象上进行了一次封装,使开发人员使用起来更简洁.高效. 两者之间用法也完全不同,很说初学者经常混淆. 其实区分两者并不难, 1.语法不 ...
- bzoj3832
拓扑排序+set 如果我们直接记录所有路径是不行的,那么我们要降低路径的数量,于是我们把最短路径转换到边上,这样我们就只有m条路径了. 先计算出f[i]和g[i]表示正反拓扑最长链,把所有g插到set ...
- 5.oracle中一个字段中存储'a','b'与'a'与a的写法,存储过程中与之对应
select '''a'',''b''' from dual; --'a','b' select '''a''' from dual; --'a' select 'a' from dual; --a
- 系统管理常用Linux命令
1.查看系统运行时间.用户数.负载 uptime 11:00:39 up 3 days, 1:08, 1 user, load average: 0.00, 0.01, 0.05 解析:后面的三 ...
- json对象和json数组
json字符串对象和json字符串数组:JSONArray跟JSONObject的区别就是JSONArray比JSONObject多中括号[] jsonObject: "Row": ...
- 做一名开源社区的扫地僧——从Bug report到Google Summer of Code(GSoC):从200个bug到5000美金
今年的软件自由日(SFD),我在广州Linux用户组的线下活动上做了一个分享,主题叫做<做一名开源社区的扫地僧(上)>.我把演讲的内容重新整理扩充, 写出了文字版, 希望可以跟更多朋友分享 ...