HTML 表单

你离开我真会死。 提交于 2019-11-29 15:41:48

一、表单

<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方式。

 

练习:

注册界面

 1 <body background="背景.jpg" topmargin="50">
 2 <div align="center">
 3 <img src="M图.png" />
 4 </div>
 5 <font face="微软雅黑" color="#660000" >
 6 
 7 
 8 <form>
 9 <table align="center" width="600" border="0" cellspacing="0" cellpadding="0">
10   <tr>
11     <td colspan="2" align="left">
12     <font face="Arial Black, Gadget, sans-serif" size="+2">Mail.注册<hr color="#660000"  />
13     </font>
14     </td>
15   </tr>
16   <tr>
17   <td colspan="2">
18     <table border="0" cellpadding="0" cellspacing="0" width="600">
19   <tr>
20   <td width="200" align="right" valign="top">▼▼▼</td>
21   </tr>
22   </table>
23   </td>
24   </tr>
25   <tr>
26     <td width="150" height="50">邮箱:</td>
27     <td><input type="text" /></td>
28   </tr> 
29   <tr>
30     <td>&nbsp;</td>
31     <td>需要通过邮箱激活账户,不支持sohu,21cn,sogou的邮箱</td>
32   </tr>
33   <tr>
34     <td height="50">登录用户名:</td>
35     <td><input type="text" /></td>
36   </tr>
37  
38   <tr>
39     <td>&nbsp;</td>
40     <td>仅在登录时使用,字符数不少于4个</td>
41   </tr>
42   <tr>
43     <td height="50">显示名称:</td>
44     <td><input type="text" /></td>
45   </tr>
46   <tr>
47     <td>&nbsp;</td>
48     <td>即昵称,字符数不少于2个</td>
49   </tr>
50   <tr>
51     <td height="50">密码:</td>
52     <td><input type="password" /></td>
53   </tr>
54   <tr>
55     <td height="50">确认密码:</td>
56     <td><input type="password" /></td>
57   </tr>
58   <tr>
59     <td>&nbsp;</td>
60     <td>至少8位,必须包含字母、数字、特殊字符</td>
61   </tr>
62   <tr>
63     <td height="50">性别:</td>
64     <td><input type="radio" name="sex" />男&nbsp;<input type="radio" name="sex" />女</td>
65   </tr>
66   <tr>
67     <td height="50">喜好:</td>
68     <td><select size="1">
69     <option value="1">听音乐</option>
70     <option value="2">看电影</option>
71     <option value="3">玩游戏</option>
72     <option value="4">网购</option>
73     </select>
74     </td>
75   </tr>
76   <tr>
77     <td height="50">&nbsp;</td>
78     <td><input type="submit" value="注册"</td>
79   </tr>
80   <tr height="50">
81   <td height="50" colspan="2">
82   <table border="0" cellpadding="0" cellspacing="0" width="600">
83   <tr>
84   <td width="200" height="83" align="left" valign="bottom">▲▲▲</td>
85   <td width="200" align="center" valign="bottom">▲▲▲</td>
86   <td width="200" align="right" valign="bottom">▲▲▲</td>
87   </tr>
88   </table>
89   </td>
90   </tr>
91   
92 
93 </table> 
94 </form>
95 </font>

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!