HTML第二部分表单及使用Photoshop快速制作网页
一、表单
<form id="" name="" method="post/get" action="负责处理的服务端">id不可重复；name可以重复；get提交有长度限制，并且编码后的内容在地址栏可见，post提交无长度限制，且编码后内容不可见。
</form>
1、文本输入
文本框<input type="text" name="" id="" value=""/>
密码框<input type="password" name="" id="" value=""/>
文本框<textaarea name="" id="" cols=""(字符多少) rows=""(几行高)></>textarea>
隐藏域<input type="hidden" name="" id="" value=""/>
2、按钮
提交按钮<input type="submit" name="" id="" disable="disable" value=""/>点击后转到form内的提交服务器地址
重置按钮<input type="reset" name="" id="" disable="disable" value=""/>
普通按钮<input type="button" name="" id="" disable="disable" value=""/>
图片按钮<input type="image" name="" id="" disable="disable" value="" src="图片地址"/>
附：
disable ，使按钮失效；enable，使可用
3、选择输入
单选按钮组<input type="radio" name="" id="" checked="checked" value=""/>name的值用来分组；value的值看不见，用来提交给程序；checked，设置默认选项
复选框组<input type="checkbox" name="" id="" checked="checked" value=""/>
文件上传<input type="file" name="" id="">
<label for=""></label>
<label>标签为input元素定义标注（标记）。
label元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在label元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label>标签的for属性应当与相关元素的id属性相同
下拉列表框
<select name ="" id="" size="" multiple="multiple"> ------size=1时，为菜单；>1时，为列表；multiple为多选。
<option value="值">内容1</option>
<option value="值" selected="selected">内容2</option>------seleted,设为默认
<option value="值">内容3</option>
</select>
二、使用Photoshop来快速制作网页
主要用于美工设计好网页构架后快速提交给用户预览时用的，用的是剪切和保存为HTML方式。
练习：
注册界面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>邮件输入</title>
</head> <body background="../PS处理/渐变3.png">
<form>
<br />
<br />
<table width="700px" border="" cellpadding="" cellspacing="" align="center">
<tr><!--第一行 -->
<td width="" height="">郵箱：</td>
<td><input type="text" /></td>
</tr> <tr><!--第二行 -->
<td width="" height=""> </td>
<td><font size="-1" color="#FF00FF">需要通過郵箱激活賬號，不支持Sohu、21cn、sogou郵箱</font></td>
</tr> <tr><!--第三行 -->
<td width="" height="">登錄用戶名：</td>
<td><input type="text" /></td>
</tr> <tr><!--第四行 -->
<td width="" height=""></td>
<td><font size="-1" color="#FF00FF">僅在登錄時使用，字符數不少於4個</font></td>
</tr> <tr><!--第五行 -->
<td width="" height="">顯示名稱：</td>
<td><input type="text" /></td>
</tr> <tr><!--第六行 -->
<td width="" height=""></td>
<td><font size="-1" color="#FF00FF">即昵稱，字符數不少於2個</font></td>
</tr> <tr><!--第七行 -->
<td width="" height="">密碼：</td>
<td><input type="password"/></td>
</tr> <tr><!--第八行 -->
<td width="" height="">確認密碼：</td>
<td><input type="password"/></td>
</tr> <tr><!--第九行 -->
<td width="" height=""></td>
<td><font size="-1" color="#FF00FF">至少8位，必須包含字母、數字、特殊字符</font></td>
</tr> <tr><!--第十行 -->
<td width="" height="">性別：</td>
<td><select name="sex" size="">
<option value="">男</option>
<option value="">女</option>
</select>
</td>
</tr> <tr><!--第十一行 -->
<td width="" height="">喜好：</td>
<td><select name="like" size="" >
<option value="">音樂</option>
<option value="">電影</option>
<option value="">繪畫</option>
</select></td>
</tr> <tr><!--第十二行 -->
<td width="" height=""></td>
<td><input type="submit" value="註冊" /></td>
</tr> </table> </form>
</body>
</html>
效果图
HTML第二部分表单及使用Photoshop快速制作网页的更多相关文章
- C# Json反序列化 C# 实现表单的自动化测试<通过程序控制一个网页> 验证码处理类：UnCodebase.cs + BauDuAi 读取验证码的值(并非好的解决方案) 大话设计模式：原型模式 C# 深浅复制 MemberwiseClone
C# Json反序列化 Json反序列化有两种方式[本人],一种是生成实体的,方便处理大量数据,复杂度稍高,一种是用匿名类写,方便读取数据,较为简单. 使用了Newtonsoft.Json,可以自 ...
- ThinkPHP第二十二天(表单令牌、相对路径、扩展配置载入、$Think获取系统变量、$_SERVER('HTTP_REFERER')前页地址)
1.表单令牌开启配置 'TOKEN_ON'=>true 2.相对路径:在thinkphp中,存在单入口index.php,所以程序中的根目录都是以index.php所在的文件夹为根目录,故用./ ...
- 基于Extjs的web表单设计器 第二节——表单控件设计
这一节介绍表单设计器的常用控件的设计. 在前面两章节的附图中我已经给出了表单控件的两大分类:区域控件.常用控件.这里对每个分类以及分类所包含的控件的作用进行一一的介绍,因为它们很重要,是表单设计器的基 ...
- C# 实现表单的自动化测试<通过程序控制一个网页>
学历代表你的过去,能力代表你的现在,学习代表你的将来 十年河东,十年河西,莫欺少年穷 学无止境,精益求精 C# 实现表单的自动化测试,这标题看着就来劲!那么,如何通过C#程序控制一个网页呢? 在此,以 ...
- ant-design-vue表单生成组件form-create快速上手
介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可 ...
- myeclipse10 .jsp将表单提交给.java（form网页与后台通信初识）
做毕设需要用到form通信. 以下几张截图来自极课学院 servlet jsp文件 web配置 出现错误: 路径问题 仍然不对,需要再改 <form action="servlet/S ...
- ExtJS4.2学习(16)制作表单(转)
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-10/188.html --------------- ...
- angularjs学习第五天笔记（第二篇：表单验证升级篇）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- HTML静态网页 图片热点、框架、表单
图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 示例: 框架: 1.frames ...
随机推荐
- ImageMagick远程命令执行工具检测工具
ImageMagick这个漏洞昨天晚上就出来了,今天才有时间研究一下,今天自己也测试了一下 效果图: ======================= 用lua写了一个检测脚本 print (" ...
- Servlet与Tomcat
Web应用不仅局限于展示在服务器上的静态页面,更多的是根据用的请求动态的生成页面信息,还可以从数据库中提取数据,生成页面返回给用户. 第一种方法:遵循HTTP协议实现一个服务器端软件 第二种方法:利用 ...
- C#开发ActiveX控件及指纹采集
最近做一个指纹采集和比对的功能,因为公司整个项目是WEB类型的,所以指纹采集的模块要嵌套在网页中,那只有用ActiveX了,以下是一些操作及效果,做个笔记! 新建用户控件,编写CS代码,如下: usi ...
- JSP学习——语法
JSP模版元素 JSP表达式 JSP脚本片断 JSP注释JSP指令JSP标签 JSP内置对象如何查找JSP页面中的错误 1:JSP模版元素 : JSP页面中的HTML内容称之为JSP模版元素. JSP ...
- jpeg了解
JPEG是一个压缩标准,又可分为标准 JPEG.渐进式JPEG及JPEG2000三种: ①标准JPEG:以24位颜色存储单个光栅图像,是与平台无关的格式,支持最高级 别的压缩,不过,这种压缩是有损耗的 ...
- Android控件_使用TextView实现跑马灯效果
一.第一种方式: 通过TextView控件的自身属性实现(但是有缺点就是当多个TextView要实现这种效果的时候,只有第一个才有效果) 实现方法加上下面四个属性: android:singleLi ...
- java虚拟机(一)——内存管理机制与OOM异常
一 java内存区域与内存溢出异常(OOM) 1)运行时数据区域划分 1.程序计数器(Program Conuter Register) 程序计数器是一块较小的内存空间,它是当前线程执 ...
- LinuxShell脚本攻略--第二章 命令之乐
用 cat 进行拼接 文件查找与文件列表玩转 xargs 用 tr 进行转换排序临时文件命名与随机数分割文件和数据根据扩展名切分文件名mv 批量重命名文件交互输入自动化 cat: echo 'Text ...
- spring源码深度解析-2功能扩展
容器功能的扩展ApplicationContext用于扩展BeanFactory中现有的功能.究竟多出了哪些功能,进一步探索.写法上:BeanFactory bf = new XmlBeanFacto ...
- 【转】 Android自定义捕获Application全局异常
大家都知道,现在安装Android系统的手机版本和设备千差万别,在模拟器上运行良好的程序安装到某款手机上说不定就出现崩溃的现象,开发者个人不可能购买所有设备逐个调试,所以在程序发布出去之后,如果出现了 ...