html的表单元素

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/>
密&nbsp; &nbsp码:<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.

可以用&nbsp表示一个空格,全角空格可以在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"/>请选择文件
原文地址:https://www.cnblogs.com/liaoxiaolao/p/9720161.html