（九）HTML表单设计

一：表单标记（<form></form>）

基本格式：

　　<form action="服务器端地址（接受表单内容的地址）" name="表单名称" method="post|get">...</form>

属性介绍：

1.name 表单名称

2.method 传送数据的方式，分为post与get

    • 　　post：post方式提交时，将表单中的数据一并包含在表单主体中，一起传送到服务器，没有数据大小限制
    •       get：get方式提交时，会将表单的内容附加在url地址的后面，所以限制了提交的内容的长度，不超过8192字符，且不具备保密性

3.action 表单数据的处理程序的url地址，如果为空则使用当前文档的url地址，如果表单中不需要使用action属性也要指定其属性为“no”

4.enctype 设置表单的资料的编码方式

5.target 和超链接的属性类似，用于指定目标窗口

二：文本域与密码（input标记）

基本语法：

　　<input type="" name="" value="" size="" maxlenght=""> <input>标记没有结束标记

属性介绍：

1.type属性

    1. 　text：当type=“text”时，<input>表示一个文本输入域
    2. password：当type=“password”时，<input>表示一个密码输入域　

2.name属性 定义控件的名称

3.value属性 初始化值，打开浏览器，文本框中的内容

4.size属性 设置控件的长度

5.maxlenght属性 输入框中最大允许输入的字符数

三：提交、重置、普通按钮

  • 提交按钮：当<input type="submit">时为提交按钮
  • 重置按钮：当<input type="reset">时为重置按钮
  • 普通按钮：当<input type="button">时为普通按钮

四：单选框和复选框

  1. 单选按钮：当<input type="radio">时为单选按钮
  2. 复选按钮：当<input type="checkbox">时为复选按钮
  3. 单选框和复选框都可以使用“checked”属性来设置默认选中项

五：隐藏域

　　当<input type="hidden">时，为隐藏表单域

六：多行文本域

用法：

　　使用<textarea>标记可以实现一个，能够输入多行文本的区域

基本语法：

　　<textarea name="name" rows="value" cols="value" value="value">......</textarea>

属性介绍：

　　rows属性和cols属性分别用来指定显示的行数与列数

　　单位是字符个数

七：菜单下拉列表域

基本语法：

　　<select name="" size="value" multiple>

　　<option value="value" selected>选项一</option>

　　<option value="value" >选项二</option>

　　<option value="value" >选项三</option>

　　......　　

　　</select>

option标记：

　　<option>标记用来指定列表中的一个选项，需要放在<select></select>之间

值：

  • value：给选项赋值，指定传送到服务器上面的值
  • selected：指定默认选项

实战：登录表单

代码如下：

 1 <html>
 2     <head>
 3         <title>表单设计</title>
 4         <meta charset="utf-8">
 5     </head>
 6     <body>
 7         <form>
 8             账号：<input type="text" name="zhanghao" size="20" >
 9             <br/>
10             密码：<input type="password" name="mima" size="20">
11             <br/>
12             爱好：<input type="checkbox" name="aihao">唱歌
13             <input type="checkbox" name="aihao">体育
14             <input type="checkbox" name="aihao">看书
15             <br/>
16             性别：<input type="radio" name="xingbie">男
17             <input type="radio" name="xingbie">女
18             </br>
19             自我介绍：</br>
20             <textarea name="ziwojieshao" rows="5" cols="35" >这里是自我介绍</textarea>
21             <br/>
22             地址：
23             <select name="dizhi">
24                 <option value="shanghai">上海</option>
25                 <option value="shenzhen">深圳</option>
26                 <option value="beijing">北京</option>
27                 <option value="zhuzhou">株洲</option>
28             </select>
29             <br/>
30             <input type="reset">
31             <input type="submit">
32         </form>
33     </body>
34 </html>

 

posted @ 2015-12-22 17:50  花花妹子。  阅读(531)  评论(0)    收藏  举报