一、表单
<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>
效果图