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>