HTML_4th_表单
2017-03-26 12:13
253 查看
一、表单
1、网页中何处用到表单?
用户登陆 、注册 、信息反馈、提供搜索工具...
作用:用表单来收集数据、信息
2、语法
2)action属性表示向何处发送表单数据。
3)enctype属性表示表单编码属性。
二、表单元素(难点)
1、基本语法
2)name属性表示input元素名称。
3)value属性表示input元素的值。
2、文本框
2)name="userName"表示文本框名称
3)value="用户名"表示文本框初始值
4)size="30"表示文本框长度
5)maxlength="20"文本框可输入最大字符
3、密码框
2)name="pass"表示密码框名称
3)size="20"表示密码框的长度
4、单选按钮
2)value="男(女)"表示单选按钮框的值
3)checked="checked"表示单选按钮为选中状态
4)两个单选按钮框的属性name的值必须相同,才能达到互斥效果。
5)属性name相同的单选按钮框可以有多个。
5、复选框
2)value="sports"表示该复选框的值。
3)checked="checked"表示该复选框为选中状态。
4)name属性值可以相同(相同表示为同一组复选框),也可以不同。
5)同一组复选框里可以有多个复选框默认有checked属性。
6、列表框(下拉列表,如选择省份)
2)size="1"表示列表显示一行,size默认值为1。
3)至少有一个<option>。
7、按钮
1)提交按钮(submit)
8、多行文本框(文本域)
三、表单高级应用
1、隐藏域
四、综合示例
1、网页中何处用到表单?
用户登陆 、注册 、信息反馈、提供搜索工具...
作用:用表单来收集数据、信息
2、语法
<!-- 语法 --> <form method="post" action="result.html" enctype="multipart/form-data"></form>1)method属性规定如何发送表单数据。
2)action属性表示向何处发送表单数据。
3)enctype属性表示表单编码属性。
二、表单元素(难点)
1、基本语法
<!-- 语法 --> <input type="text" name="fname" value="text" />1)type属性表示input元素类型。
2)name属性表示input元素名称。
3)value属性表示input元素的值。
2、文本框
<!-- 语法 --> <input type="text" name="userName" value="用户名" size="30" maxlength="20" />1)type="text"表示这是一个文本框
2)name="userName"表示文本框名称
3)value="用户名"表示文本框初始值
4)size="30"表示文本框长度
5)maxlength="20"文本框可输入最大字符
3、密码框
<!-- 语法 --> <input type="password" name="pass" size="20" />1)type="password"表示这是一个密码框
2)name="pass"表示密码框名称
3)size="20"表示密码框的长度
4、单选按钮
<!-- 语法 --> <input name="sex" type="radio" value="男" checked="checked" />男 <input name="sex" type="radio" value="女" />女1)type="radio"表示这是一个单选按钮框
2)value="男(女)"表示单选按钮框的值
3)checked="checked"表示单选按钮为选中状态
4)两个单选按钮框的属性name的值必须相同,才能达到互斥效果。
5)属性name相同的单选按钮框可以有多个。
5、复选框
<!-- 语法 --> <input type="checkbox" name="interest" value="sports" />运动 <input type="checkbox" name="interest" value="talk" checked="checked" />聊天 <input type="checkbox" name="interest" value="play" />玩游戏1)type="checkbox"表示这是一个复选框。
2)value="sports"表示该复选框的值。
3)checked="checked"表示该复选框为选中状态。
4)name属性值可以相同(相同表示为同一组复选框),也可以不同。
5)同一组复选框里可以有多个复选框默认有checked属性。
6、列表框(下拉列表,如选择省份)
<!-- 语法 --> <select name="住址" size="1"> <option value="选项的值" selected="selected">省份1</option> <option value="选项的值">省份2</option> <option>省份3</option> <option>省份4</option> ······ </select>1)name="列表名称"表示列表名称。
2)size="1"表示列表显示一行,size默认值为1。
3)至少有一个<option>。
7、按钮
1)提交按钮(submit)
<!-- 语法 --> <input type="submit" name="butSubmit" value="submit按钮" />2)重置按钮(reset)
<!-- 语法 --> <input type="reset" name="butReset" value="reset按钮" />3)普通按钮(button)
<!-- 语法 --> <input type="button" name="butButton" value="button按钮" />4)图片按钮
<!-- 语法 --> <input type="image" src="images/login.gif" />1)图片按钮同样具有提交表单的功能。
8、多行文本框(文本域)
<!-- 语法 --> <textarea name="showText" cols="x" rows="y">文本内容</textarea>9、文件域
<!-- 语法 --> <form method="post" action="" enctype="multipart/form-data"> <input type="file" name="myFile" /> <input type="submit" name="upload" value="上传" /> </form>
三、表单高级应用
1、隐藏域
<!-- 语法 --> <input type="hidden" name="userid" value="666" />2、只读
<!-- 语法 --> <input type="text" name="name" value="张三" readonly="readonly"/>3、禁用
<!-- 语法 --> <input type="submit" disabled="disabled" value="保存" />
四、综合示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <p>注册</p> <form method="post" action="" enctype="multipart/form-data"> 用户名:<input type="text" name="username" maxlength="10" size="20" value="123" readonly="readonly" /><br /> 密 码:<input type="password" name="pwd" maxlength="6" size="20" /><br /> <span>请选择您的性别</span>& 4000 lt;br /> <input type="radio" value="男" name="sex" checked="checked" />男 <input type="radio" value="女" name="sex" />女<br /> <span>请选择您的爱好</span><br /> <input type="checkbox" />打球 <input type="checkbox" checked="checked" />玩游戏 <input type="checkbox" />看电影 <input type="checkbox" />听音乐<br /> <span>请选择您的住址</span><br /> <select name="住址" size="1"> <option>湖南</option> <option selected="selected">湖北</option> <option selected="selected">上海</option> </select> <br /> <span>交友宣言</span><br /> <textarea cols="30" raws="3"></textarea> <br /> <input type="file" name="file" /> <input type="submit" name="update" value="上传"/> <br /> <input type="submit" name="button" value="提交" /> <input type="reset" name="reset" value="重置" /> <input type="button" name="anniu" value="点我啊" disabled="disabled" /> </form> </body> </html>页面显示:
相关文章推荐
- Html---表单
- JavaScript权威指南_139_第15章_脚本化文档_15.9-HTML表单-选取表单和表单元素
- HTML学习4----表单控件
- HTML,PHP表单传值注意事项
- HTML学习笔记之第八章:表单
- HTML之表单
- HTML表单元素
- html表单基础之输入学习笔记
- JavaScript权威指南_143_第15章_脚本化文档_15.9-HTML表单-开关按钮
- html+css创建炫酷表单
- HTML--表格与表单
- 24 个漂亮的个性化 HTML 表单技术
- HTML中的Label 在表单中的应用
- html向action提交表单,中文乱码问题的解决
- html-3 透明度、指针样式、表单
- HTML 05: 表单(FORM)标记(TAGS)
- [Web前端]梳理-DOM.19. HTML表单
- HTML格式的Form表单文件FOLDER.htm的内容
- [html&css]Pass Through - 31.表单必填
- laravel 表单和HTML扩展包