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表单设计（上）的更多相关文章

  1. UX设计秘诀之注册表单设计，细节决定成败

    以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 说实话,现实生活中,又有多少人会真正喜欢填写表格?显然,并不多.因为填写表单这样的网页或App服务,并非 ...

  2. CSS表单设计

    今天我们开始学习<十天学会web标准(div+css)>的css表单设计,包含以下内容和知识点: 改变文本框和文本域样式 用图片美化按钮 改变下拉列表样式 用label标签提升用户体验 一 ...

  3. SpreadJS V13.0发布，聚焦表单设计与数据交互，让您的工作效率突飞猛进！

    纯前端表格控件SpreadJS,是一款成功应用于华为.招商银行.天弘基金.苏宁易购等国内外知名企业的前端开发工具,其带来的价值不仅体现在帮助开发人员在其Web应用程序中快速构建 Web Excel . ...

  4. 循序渐进VUE+Element 前端应用开发(27）--- 数据表的动态表单设计和数据存储

    在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...

  5. SNF软件开发机器人-子系统-表单-表单设计

    表单设计 在我们做程序时总要对表单的内容进行设计,然而对控件位置等信息的调整总是麻烦的,还常常容易出错.SNF软件机器人完美的解决了这个问题. 1.效果展示: 2.使用说明: (1)打开页面,选中开发 ...

  6. CURL模拟表单post提交及相关常用参数的使用（包括提交表单同时上传文件）

    转载自:https://blog.csdn.net/freedomwjx/article/details/43278157 (注:在curl前面加上time如time curl xxx,可以在最后显示 ...

  7. 混合表单文件上传到数据库（基于TOMCAT）

    在实际的开发中在实现文件上传的同时肯定还有其他信息需要保存到数据库,就像混合表单在上传完毕之后需要将提交的基本信息插入数据库. 在这个demo中需要用到这个架包来帮助实现 1.定义一个公共类实现文件上 ...

  8. 33个与众不同的Web表单设计

    表单在web设计中很重要,因为它具有直接的用户交互.创新?有趣?富有色彩?设计一个交互,需要设计师关注登陆/注册表单的设计元素. 这里有33个与众不同的web表单设计,希望能使你获得设计灵感. 1. ...

  9. Web标准：九、CSS表单设计

    Web标准:九.CSS表单设计 知识点: 1.改变文本框和文本域样式 2.用图片美化按钮 3.改变下拉列表样式 4.用label标签提升用户体验   1)改变文本框和文本域样式 文本框标签:<i ...

随机推荐

  1. Asp.net MVC4高级编程学习笔记-视图学习第一课20171009

    首先解释下:本文只是对Asp.net MVC4高级编程这本书学习记录的学习笔记,书本内容感觉挺简单的,但学习容易忘记,因此在边看的同时边作下了笔记,可能其它朋友看的话没有情境和逻辑顺序还请谅解! 一. ...

  2. python-实现一个贴吧图片爬虫

    今天没事回家写了个贴吧图片下载程序,工具用的是PyCharm,这个工具很实用,开始用的Eclipse,但是再使用类库或者其它方便并不实用,所以最后下了个专业开发python程序的工具,开发环境是Pyt ...

  3. 苹果手机使用替代onkeyup的方法

    今天项目有这个问题,苹果手机就不行   使用keyup事件检测文本框内容:  $('#keyup_i').bind('keyup', function(){         $('#keyup_s') ...

  4. [C#]Winform后台提交数据且获取远程接口返回的XML数据,转换成DataSet

    #region 接口返回的Xml转换成DataSet /// <summary> /// 返回的Xml转换成DataSet /// </summary> /// <par ...

  5. java.security.InvalidKeyException: Illegal key size

    今天遇到一个奇怪的问题. 自己做的加签验签功能已经没有问题了,本地测试通过,同事放到服务器上测试也没问题. 然后我将包放到自己搭建的环境上,会报这样一个错误: java.security.Invali ...

  6. oracle temporary table

    oralce 有两种临时表  a.会话级临时表 b.事物级临时表 A.事物级临时表 语法 create  global temporary table table_name( col1  type1, ...

  7. Git命令(1)

    windows中文乱码: http://www.cnblogs.com/Gukw/archive/2012/01/16/2323417.html 学习地址 :http://www.liaoxuefen ...

  8. ModelForm

    这是一个神奇的组件,通过名字我们可以看出来,这个组件的功能就是把model和form组合起来,对,你没猜错,相信自己的英语水平. 先来一个简单的例子来看一下这个东西怎么用: 比如我们的数据库中有这样一 ...

  9. JS的基本类型（小知识）

    一:js中的基本类型: 基本类型:boolen, string ,number,null,undefined 引用类型:object,和函数 二.undedifned和null的区别: 1 undef ...

  10. Memcached理解

    一.Memcached简介: 1. Memcached是一个自由开源的,高性能的,分布式内存对象缓存系统. 2. Memcached是一种基于内存的key-value存储,用来存储小块的任意数据(字符 ...