HTML之表单的使用
2017-08-21 19:14
274 查看
HTML之表单的使用
HTML/CSS/Javascript在线代码运行工具
form:最顶层表单元素,其它元素都位于其内部
input:最常用的表单控件,通过其type属性可变换成不同的元素
select:下拉列表元素
textarea:多行文本输入框
1.2 语法:
1.3 form:
form属性:
action属性是指表单提交的路径,往往是服务器侧一个小程序
method属性是指数据提交方式
1.4 input元素:
input元素是最常用的表单元素,type属性值可设定为如下:
text
属性:单行的文本输入框
单元输入,比如登录用户名
password
属性:带掩码的单行输入框
密码输入
file
属性:文件选择器
作用:要上传文件时
hidden
属性:不显示在页面上,但还是会传给服务器
作用:不显示在页面上,但还是会传给服务器
button
属性:一般按钮
作用:常配合JS使用
reset
属性:恢复初始值
作用:需要恢复初始值
submit
属性:提交按钮
作用:按下后将数据提交给服务器
name属性是很多元素的元素,在一个
4000
页面name的值是可以重复的,比如将checkbox或raido组成一组要取同名. name属性值对于表单元素来说,后继浏览会根据其名称把数据传给服务器。
id属性值在同一个页面上只能出现一次.因为根据唯一的ID值来取得其对应的元素
value属性值是最终传给服务器的值,对于checkbox,radio一定明示其值
1.5 select元素:
select元素用在下拉列表框,其子元素为option
1.6 textarea:
多行输入框
样例效果:
以下代码可以使用网络html运行,或者使用HBuilder,本人使用在HBuilder环境下运行实例:
下面网址是是网络HTML运行器:HTML/CSS/Javascript在线代码运行工具
1.表单基础知识了解
1.1 当我们要向服务器提交数据时,就要使用表单。form:最顶层表单元素,其它元素都位于其内部
input:最常用的表单控件,通过其type属性可变换成不同的元素
select:下拉列表元素
textarea:多行文本输入框
1.2 语法:
<form action="" method="" enctype=""> 若干的表单元素 </form>
1.3 form:
form属性:
action属性是指表单提交的路径,往往是服务器侧一个小程序
method属性是指数据提交方式
1.4 input元素:
input元素是最常用的表单元素,type属性值可设定为如下:
text
属性:单行的文本输入框
单元输入,比如登录用户名
password
属性:带掩码的单行输入框
密码输入
file
属性:文件选择器
作用:要上传文件时
hidden
属性:不显示在页面上,但还是会传给服务器
作用:不显示在页面上,但还是会传给服务器
button
属性:一般按钮
作用:常配合JS使用
reset
属性:恢复初始值
作用:需要恢复初始值
submit
属性:提交按钮
作用:按下后将数据提交给服务器
name属性是很多元素的元素,在一个
4000
页面name的值是可以重复的,比如将checkbox或raido组成一组要取同名. name属性值对于表单元素来说,后继浏览会根据其名称把数据传给服务器。
id属性值在同一个页面上只能出现一次.因为根据唯一的ID值来取得其对应的元素
value属性值是最终传给服务器的值,对于checkbox,radio一定明示其值
1.5 select元素:
select元素用在下拉列表框,其子元素为option
1.6 textarea:
多行输入框
2.实例源代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <h3>注册</h3> <form action="http://www.sohu.com" method="get"> 用户名:<input type="text" name="uname" value="Rose" maxlength="6"/><br> 密码:<input type="password" name="upass"/><br> 确认密码:<input type="password" name="ucfgpass"/><br> 爱好:<input disabled="disabled" checked="checked" type="checkbox" name="hobby" value="param"/>编程 <input type="checkbox" name="hobby" value="swim"/>游泳 <input type="checkbox" name="hobby" value="makefriend"/>交友<br> 性别:<input id="200" type="radio" name="gender" value="boy"/>男 <input id="201" checked="checked" type="radio" value="gril" name="gender"/>女<br> 头像:<input type="file" /><br> 隐藏域:<input type="hidden" /><br> 出生日期: <select name="year" id=""> <option value="">1980</option> <option value="">1981</option> <option value="">1982</option> <option value="">1983</option> </select> 年 <select name="month" id=""> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> </select> <br> <textarea name="memo" rows="4" cols="50"> 我们都是好学生,每天都要花4个小时在编码上 </textarea> <br> <input type="button" value="一般按钮"/> <input type="reset" value="恢复初始值"/> <input type="submit" value="提交"/><br> </form> </body> </html>
样例效果:
相关文章推荐
- html+css基础视频80-88/表格和表单的使用
- 结合 PHP 使用 HTML 表单
- 使用Html.BeginForm来提交表单(转)
- 【前端笔记】使用HTML创建表单项
- HTML 表单(form) 使用详解
- 结合 PHP 使用 HTML 表单
- PHP编程之HTML(表单的使用)
- html中form表单的使用实例
- 使用Html.BeginForm来提交表单
- HTML 表单(form) 使用详解
- html表单标记简单使用
- 使用HTML的表单form上传文件,需要考虑的几个问题
- html表单控件的使用
- 结合PHP使用HTML表单(3)
- HTML的表单form以及form内部标签的使用
- Yii 使用CActiveForm创建表单,以及htmlOptions简单说明
- HTML中Form表单的method属性使用介绍
- Struts2获取HTML表单元素与Struts表单标签的区别使用-基础篇
- html表格以及form表单部分标签的使用
- html 使用表单标签,与用户交互