HTML中常用的12个表单form控件
<style>
.form {
width: 600px;
margin: 50px auto;
}
.form div {
margin: 10px;
margin-top: 20px;
}
</style>
<form method='post' action="form.php" class="form">
<div>
1.单行文本输入框:<input type="text" name="username" value=""/>
</div>
<div>
2.密码输入框:<input type="password" name="password" maxlength="5"/>
</div>
<div>
3.单选按钮:<input type="radio" name="sex" id='man' value="man"/><label for="man">男</label>
<label for="woman"><input type="radio" name="sex" id="woman" value="woman"/>
女</label>
<label for="secret"><input type="radio" name="sex" value="secret" id="secret" checked='true'/>保密</label>
</div>
<div>
<!--这是复选框-->
4.复选框:<input type="checkbox" name="fruit[]" id='apple' value="apple" checked="checked"><label
for="apple">苹果</label>
<input type="checkbox" name="fruit[]" id="pear" value="pear"><label for="pear">梨</label>
<label for="watermelon"><input type="checkbox" name="fruit[]" id="watermelon" checked="checked"
value="watermelon">西瓜</label>
</div>
<div>
5.普通按钮:<input type="button" value="这是普通按钮"/>
</div>
<div>
6.图像按钮:<input type="image" value="图像按钮" src="btn.png" height="20" name='image'/>
</div>
<div>
7.隐藏域:<input type="hidden" value='隐藏域' name='hidden'/>
<span>隐藏域页面看不到</span>
</div>
<div>
8.上传文件:
<input type="file" name='file'/>
<!--多行文本输入-->
</div>
<div>
9.多行文本输入:
<textarea name="textarea" style="width:200px;height:100px;"></textarea>
</div>
<div>
10.下拉选择:
<select id="select" name='select'>
<option value="山东">山东</option>
<option value="beijing">北京</option>
<option value="shangai" selected="true">上海</option>
<option value="guangdong">广东</option>
<option value="henan">河南</option>
<option value="hebei">河北</option>
</select>
</div>
<div>
<!-- 重置按钮只有放在form表单域中才起作用-->
11.重置按钮:<input type="reset" value="重置" name="reset"/>
</div>
<div>
12.提交:<input type="submit" value="提交" name="submit"/>
</div>
</form>
