基本结构
<input type=”类型” name=”名字”/>
一般说，表单元素通常是被 <form> 包含起来的
入门案例:
Login.html
<html>
<head>
<title>登录页面</title>
</head>
<body>
<!--action的值应当是提交哪个页面(url)-->
<!--method 方法指定提交数据的方式,常用的有两种 get / post -->
<form action="ok.html" method="post">
<!--name 的值可以任意，但是不要使用关键字-->
用户名:<input type="text" name="username"/><br/>
密 码:<input type="password" name="password"/><br/>
<input type="submit" value="登录系统"/>
<input type="reset" value="重新填写"/>
</form>
</body>
</html>
Ok.html
Ok,登录成功
原理图:
请考虑： 如果我们希望偷偷的提交数据,不要影响节目效果，可以考虑使用隐藏域
案例代码:
<html>
<head><title>表单元素</title></head>
<body>
<form action="ok.html" method="get">
您最喜欢哪些城市:
<input type="checkbox" name="cities" value="beijing">北京
<input type="checkbox" name="cities" value="shanghai">上海
<input type="checkbox" name="cities" value="伦敦">伦敦
<br/>
您的性别是:
<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女<br/>
隐藏域的使用
<input type="hidden" name="data" value="ok"/><br/>
下拉列表<br/>
请选择您的出生地:
<select name="address" size=3 multiple>
<option value="sichuan">四川</option>
<option value="beijing">北京</option>
<option value="xizang">西藏</option>
</select><br/>
<!--文本域,-->
<textarea name="mytextarea" cols="40" rows="10">
</textarea><br/>
<!--文件上传的控件-->
<input type="file" name="myfile">上传文件<br/>
<input type="submit" value="测试"/>
<!--这是一个图片按钮-->
<input type="image" src="image1.png"/>
</form>
</body>
</html>
