html的表单元素主要用于让用户输入数据,并提交给服务器。
基本语法是:
<form action="url" method="提价的方法(get/post)">
各种元素[输入框,下拉列表,密码框,文本域]
</form>
默认用的是get方法。
案例:
<html>
<head>
<title>登录界面</title>
</head>
<body>
<h1>登录界面</h1>
<form action="???" method="get">
用户名:<input type="text" name="username"><br/>
密  码:<input type="password" name="pwd"><br/>
<input type="submit" value="登录">
<input type="reset" value="重新填写"/>
</form>
</body>
</html>
form里中的type可以是text,password,checkBox,radio,image,hidden,submit,reset.
可以用 表示一个空格,全角空格可以在html中占用一个汉字的位置大小。
从上面的案例,我们可以看出:
(1)表单元素的格式
<input type=* name=**/>
type=text(文本框) password(密码框) hidden(隐藏域) checkbox(复选框) radio(单选框)
submit(提交按钮) reset(重置按钮) image(图片按钮)
name 是你给该表单元素取名。
(2)action指定把请求交给哪个页面
input元素的举例说明
代码:
名字:<input type="text" name="username" value="请填入名字..."/><br/> 密码:<input type="password" name="pwd" value="00"/><br/> ***喜欢的水果***<br/> <input type="checkbox" name="v1">西瓜<br/> <input type="checkbox" name="v2">苹果<br/> <!--name最好一致,这样才能保证是同一个复选框,name不一样不会被选中吧--> ***********选择性别********<br/> <input type="radio" name="sex"/>男<br/> <input type="radio" name="sex"/>女<br/> <!--参与单选的name一定要一样,否则无法达到切换的目的--> ************隐藏(它的用处主要是,既可以提交数据,同时不影响界面,不占用空间)<br/> <input type="hidden" value="123" name="sal"/> 与上面文字间没有空隙。<br/> 在div+css中不占用位置,可以加入。 *************下拉选择框********<br/> 请选择你的出生地 <select name="birAddress"> <!--将数据提交给服务器时,服务器接收到的是value值--> <option value="">----请选择-----</option><!--可以扩展宽度--> <option value="beijing">北京</option> <option value="chongqi ">重庆</option> <option value="sh">上海</option> </select> ************请留言********<br/> <textarea cols="30" rows="10">请这里输入......</textarea><br/> **********请选择你要上传的文件*******<br/> <input type="file" name="myfile"/>请选择文件