web前端选择框的部分知识点

1.有关选框的知识:选框有很多种,其中常用的有文本选框,单选选框,复选选框,选择下拉选框,默认选择选择项的选框。
选择框的基本结构:<form method="get" action="">
                 <input...............>
                 </form>
1.单选选框:<form method="get" action="">
	apple<input type="radio" name="fruit" value="apple"><!--数据类型和数据名和数据值,name的类型里面输入什么的可以,输入的内容要用意义。-->
	organe<input type="radio" name="fruit" value="organe"><!--单选的话name的值要一样-->
	banana<input type="radio" name="fruit" value="banana">
	<input type="submit"><!--提交按钮,单选type类型中要选radio-->
</form>
2.复选选框:<form method="get" action="">
	apple<input type="checkbox" name="fruit" value="apple">
	orange<input type="checkbox" name="fruit" value="orange">
	banana<input type="checkbox" name="fruit" value="banana">
	<input type="submit">
</form> <!--复选框和单选框的区别就在于 type的类型,单选框的type类型是radio,复选框的type类型是checkbox-->
3.文本选框:<form method="get" action="">
	username:<input type="text" name="username"><br>
	password:<input type="password" name="password"><br>
	<input type="submit"><br>
</form>    <!--type的类型要选择文本类型-->
4.默认选择选项的选择框。
form method="get" action="">
	<h1>CHOOSE YOUR SEX!!!!
	</h1>
	female:<input type="radio" name="SEX" value="female" checked="checked">
	male:<input type="radio" name="SEX" value="male"><br>
	<input type="submit">
</form>      <!--如有选框需要默认选项的话,只要加上checked="checked",就能默认选项-->   
5.可以往下拉的选项:
<form method="get" action="">   
	<h1>选项的下拉菜单</h1>
	<select name="province">
		<option>广州</option>
		<option>北京</option>
		<option>上海</option>
	</select><br>
</form>
	<!--其中它的结构是<select>
	                   <option></option>
	                   <option></option>
	                   <option></option>
	                   </select>
	                   提交数据的时候要注意数据名和数据值 option 里面包含的值就是数据值。-->

猜你喜欢

转载自blog.csdn.net/Hhjian524/article/details/82717220