您的位置:首页 > Web前端 > HTML

HTML之表单的使用

2017-08-21 19:14 274 查看
HTML之表单的使用

以下代码可以使用网络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>


样例效果:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: