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="0" cellpadding="0" cellspacing="0" align="center">
<tr><!--第一行 -->
<td  width="110" height="40">郵箱:</td>
<td><input type="text" /></td>
</tr>

<tr><!--第二行 -->
<td  width="110" height="40">&nbsp;</td>
<td><font size="-1" color="#FF00FF">需要通過郵箱激活賬號,不支持Sohu、21cn、sogou郵箱</font></td>
</tr>

<tr><!--第三行 -->
<td  width="110" height="40">登錄用戶名:</td>
<td><input type="text" /></td>
</tr>

<tr><!--第四行 -->
<td  width="110" height="40"></td>
<td><font size="-1" color="#FF00FF">僅在登錄時使用,字符數不少於4個</font></td>
</tr>

<tr><!--第五行 -->
<td  width="110" height="40">顯示名稱:</td>
<td><input type="text" /></td>
</tr>

<tr><!--第六行 -->
<td  width="110" height="40"></td>
<td><font size="-1" color="#FF00FF">即昵稱,字符數不少於2個</font></td>
</tr>

<tr><!--第七行 -->
<td  width="110" height="40">密碼:</td>
<td><input type="password"/></td>
</tr>

<tr><!--第八行 -->
<td  width="110" height="40">確認密碼:</td>
<td><input type="password"/></td>
</tr>

<tr><!--第九行 -->
<td  width="110" height="40"></td>
<td><font size="-1" color="#FF00FF">至少8位,必須包含字母、數字、特殊字符</font></td>
</tr>

<tr><!--第十行 -->
<td  width="110" height="40">性別:</td>
<td><select name="sex" size="1">
<option value="11">男</option>
<option value="22">女</option>
</select>
</td>
</tr>

<tr><!--第十一行 -->
<td  width="110" height="40">喜好:</td>
<td><select name="like" size="1" >
<option value="33">音樂</option>
<option value="44">電影</option>
<option value="55">繪畫</option>
</select></td>
</tr>

<tr><!--第十二行 -->
<td  width="110" height="40"></td>
<td><input type="submit" value="註冊" /></td>
</tr>

</table>

</form>
</body>
</html>

效果图

时间: 2024-10-19 10:56:42

HTML第二部分表单及使用Photoshop快速制作网页的相关文章

图片热点,内嵌网页,表单,快速制作网页

1.图片热点 阿达撒 设计显示 2.内嵌网页 代码: <body><iframe src="http://lol.qq.com/" width="500" height="500"></iframe><iframe src="http://tieba.baidu.com/f?kw=%BD%E4%CD%F8" width="600" height="600&

html表单 和快速制作网页的方法

表单: <form id="" name="" method="post/get" action="负责处理的服务端"> id不可重复,name可重复,get提交有长度限制,并且编码后的内容在地址栏可见, post提交没有长度限制,且编码后内容不可见. </form> 1.文本输入 文本框<input type="txt" name="" id="

基于Extjs的web表单设计器 第二节——表单控件设计

这一节介绍表单设计器的常用控件的设计. 在前面两章节的附图中我已经给出了表单控件的两大分类:区域控件.常用控件.这里对每个分类以及分类所包含的控件的作用进行一一的介绍,因为它们很重要,是表单设计器的基本元素,更是核心组成部门. 一.区域控件,它主要包含三个类型的控件:卡片区域.表格区域.混合区域.这三个控件是我们的其他控件的容器或者叫包装器,相当于VS里面的各种Panel.它们很重要,每种区域控件的作用都不一样,能够包含的控件类型也不大一样,它们三个区域相互配合使用,可以为我们的表单提供强大的支

深入理解表单脚本系列第二篇——表单字段

× 目录 [1]访问 [2]属性 [3]方法[4]事件 前面的话 表单字段又叫表单元素,表示表单所包含控件,如<input>.<select>等.本文将详细介绍表单字段的内容 访问 每个表单都有elements属性,该属性是表单中所有元素的集合.这个elements集合是一个有序列表,其中包含着表单中的所有字段,如<input>.<textarea>.<button>和<fieldset> 每个表单字段在elements集合中的顺序,

学习前端的第二天 表单二

多选框 <input type="checkbox" name="hbi" value="0" id="book" checked="checked"/>   <label for="book">看书</label>   <input type="checkbox"  name="hbi" value=&q

myeclipse10 .jsp将表单提交给.java(form网页与后台通信初识)

做毕设需要用到form通信. 以下几张截图来自极课学院 servlet jsp文件 web配置 出现错误: 路径问题 仍然不对,需要再改 <form action="servlet/ShowChart" method="post">

ExtJS4.2学习(16)制作表单(转)

鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-10/188.html ---------------------------------------------------------------------------------------- 一.我们来制作一个简单的表单: 代码: /** * ExtJS之制作表单——第一个表单 */ Ext.onReady(function(){ var f

表单和iframe的使用

图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果.示例: 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容.示例: 网页的拼接: 在一个网络页面内,规划出多个页面窗口,以表格拼接的形式展示出来. 示例: 表单: <form id="" name="" method="post/get" action="负责处理的服务端"> id不可重复,name可重复,get

2016/2/18 html 图片热点,网页划区,拼接,表单

①图片热点 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 显示 ②网页划区 在一个网页里,规划出一个区域用来展示另一个网页的内容. ③网页拼接 在一个网络页面内,规划出多个页面窗口,以表格拼接的形式展示出来. ④表单 <form id="" name="" method="post/get" action="负责处理的服务端"> id不可重复,name可重复,get提交有长度限制,