form表单元素

最新推荐文章于 2024-07-17 22:23:53 发布

超人233

最新推荐文章于 2024-07-17 22:23:53 发布

阅读量2.9k

点赞数 3

本文链接：https://blog.csdn.net/qq_42223479/article/details/80483713

版权

form表单元素

1.form表单元素：常见的表单元素有输入框，单选框，复选框，文本域，密码框等

2.其基本样式为<input type="类型" name="名字">

3.input 为输入框，其因type不同而类型不同

4.type类型：

（1）checkbox：多选框

（2）radio：单行单选框

（3）text：文本域

（4）file：文件上传域

（5）image：图像域（可指定width和height）

（6）submit：提交按钮

（7）reset：重置按钮

（8）button：普通按钮

（9）hidden：隐藏域

5.input 属性

（1）size：该属性是一个数字，指定该元素的长度。当type=”hidden”时不能指定该属性

（2）src：指定图像域所显示的图像，只有当type=”image”时才可以指定该属性

（3）name：单选框里的name一定要一样，否则出错

6.代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form  action="index.html">
			<p>姓名：  <input type="text" name="username"></p>
                                                          <!--
                                                          	作者：2992926617@qq.com
                                                          	时间：2018-05-21
                                                          	描述：文本域
                                                          -->
			<p>密码：  <input type="password" name="password"> </p>
			<p>确认密码：<input type="password" name="password"> </p>
			<input type="radio" name="sex" value="male" />男
                                                           <!--
                                                           	作者：2992926617@qq.com
                                                           	时间：2018-05-21
                                                           	描述：单选框   单选按钮   注意名字要一样
                                                           -->
			<input type="radio" name="sex" value="female"> 女<br />
			 	<input type="submit" value="登陆系统"> 
			<input type="reset" value="重新填写"><br />
			<input type="checkbox" name="bike">i have a bike<br />
                                                                  <!--
                                                                  	作者：2992926617@qq.com
                                                                  	时间：2018-05-21
                                                                  	描述：复选框，也就是多选框
                                                                  -->
			<input type="checkbox" name="car" /> i have a car<br />
			生日 <input type="date"  name="年 月 日"/>
		</form>	
	</body>
</html>

7.演示效果如下

8列表框和下拉菜单

<select name="指定列表名称" size="行数">
    <option value="选项值" selected="selected">...</option>
</select>

9.列表框的常用属性

（1）disabled：指定是否禁用此元素，其属性只能是disabled或省略

（2）multiple：设置该列表框是否多选，其属性为multiple或干脆不写该属性

（3）size：指定该列表内同时显示多少个列选项

value：指定该选项对应的请求参数值，用于传递数据给服务器

selected：指定该列表初始状态是否处于被选中状态，值只能是selectd或者省略该属性。

disabled：指定禁用该选项，该属性值只能是disabled或者省略该属性。

10.textarea 多行文本框

clos文本框的宽度（必填）
rows文本框的高度（必填）
readonly：文本框是只读，值只能是readonly或省略该属性

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>form练习</title>
	</head>
	<body>
		<form>
			你喜欢的城市是：<input type="checkbox" name ="西藏" value="xizhang"/>西藏
			<input type="checkbox" name ="通辽"  value="tongliao"/>通辽
			<input type="checkbox" name="西安 " value="xian"/>西安<br />
			你的性别是<input type="radio" name ="sex"  value="male"/>男
			<input type="radio" name="sex" value="female" />女<br />
			请选择你的出生地:<select name="birthplace" multiple="multiple" size="1">
                                                                            <!--
                                                                            	作者：2992926617@qq.com
                                                                            	时间：2018-05-21
                                                                            	描述：size是显示几个
                                                                            -->
				<option value="sichuan">四川</option>
				<option value="tongliao">通辽</option>
				<option value="huhehaote">西安</option>
				<option value="qingdao">青岛</option>
				</select><br />
				<input type="file" name="uploadfile" />上传照片<br />
				备注：<br />
				<textarea name="beizhu" clos="15" rows="5"></textarea><br />
				<input name="zuihou" type="submit" value="提交" />
				<input name="zuihou" type="reset" value="注册" />
				
			
		</form>
	</body>
</html>

演示效果如下