标签：
一、表单
<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"> </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>
效果图
标签：
原文地址：http://www.cnblogs.com/bloodPhoenix/p/5655945.html
