-
表单的运用
在大量的网页开发中表单的运用是避不了，比如
在这我们可以看出表单在各方面的运行范围特别广泛
-
表单的基本语法
1 <form method="post" action="result.html"> 2 <p> 名字：<input name="name" type="text" > </p> 3 <p> 密码：<input name="pass" type="password" > </p> 4 <p> 5 <input type="submit" name=“Submit" value=" 提交"> 6 <input type=“cancel” name=“Cancel” value=“取 取 消"> 7 </p> 8 </form>
其中method="post"规定如何发送表单数据常用值，action="result.html"表示向何处发送，但是在实际网页开发中通常采用post提交表单数据
-
表单元素form
表单元素 form 的 常用属性
- 表单元素的动作属性action
- 表单元素的发送数据方式属性method
- 表单元素的名称属性name
- 表单元素的编码属性enctype
- 表单元素的目标显示方式属性target（-top -blank -self -parent）
表单控件元素
表单的元素格式：
语法：<input type="text" name="fname" value="text">
- type：指定元素的类型。包括：
- text文本框类型
- password：密码狂类型
- checkbox：复选框类型
- radio：单选框类型
- submit：提交类型
- reset：重置类型
- file：文件类型
- hidden：影藏类型
- image：图片框类型
- name：指定表单元素的名称
- value：元素的初始值 。type为 为 radio 时必须为一个值
- size：指定表单元素的初始宽度 .当 当 type 或 password 时 ，表单元素的大小以字符为单位 对于其他类型 ，宽度以像素为单位
- maxlenght：type 为text 或 或 password 时 ，输入的最大字符串
- checked：type 为radio 或checkbox 时 ， 指定按钮是否是被选中
-
表单的元素使用方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <link rel="stylesheet" type="text/css" href="css/index.css"/> 6 </head> 7 <body> 8 <div class="list1"> 9 10 <form method="post" action="result.html"> 11 <p>用户名：<input name="name" type="userName" value="" size="30" maxlength="22" ></p> 12 <!-- 文本框 --> 13 <p>密 码：<input name="name" type="password" size="30" maxlength="20"></p> 14 <!-- 密码框 --> 15 <p><input type="radio" name="gen" value="男" checked="checked" >男<input type="radio" name="gen" value="男" checked="checked">女</p> 16 <!-- 单选按钮框 --> 17 <p><input type="checkbox" name="interst" value="运动"/>运动 18 <br/><input type="checkbox" name="interst" value="talk"/>聊天 19 <br/> <input type="checkbox" name="interst" value="game"/>玩游戏</p> 20 <!-- 复选框 --> 21 <p>请选择文件：<input type="file" name="fies"/> 22 <input type="submit" name="upload" value="上传"/></p> 23 <!-- 文件域 --> 24 <p> 25 选择城市 26 <select name="mc" id=""> 27 <option value="北京">北京</option> 28 <option value="上海">上海</option> 29 </select> 30 </p> 31 <!-- 下拉列表框 --> 32 <!-- <p>请给出建议:<br/><textarea name="showText" cols="x" rows="y" ></textarea></p> --> 33 <p>请给出建议:<br/><textarea name="showText" cols="50" rows="10" ></textarea></p> 34 <!-- 添加一个空白文本框，可以填写多行内容 --> 35 <p><input type="reset" name="Butrest" value="重置按钮"/> 36 <input type="button" name="Butbutton" value="普通按钮"/></p> 37 <p><input type="submit" name="Submit" value="提交"/> 38 <input type="cancel" name="Cancel" value="取消"/></p> 39 <!-- 按钮 --> 40 </form> 41 </div> 42 </body> 43 </html>
这样就可以学到相应的表单
注：本文章来自walkerup的微博