Sublim编写html中的表单，用户名密码，单选，复选，提交按钮等

最新推荐文章于 2024-06-07 22:59:08 发布

小白成长札记

最新推荐文章于 2024-06-07 22:59:08 发布

阅读量466

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/weixin_45734905/article/details/130115040

版权

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>表单</title>
</head>
<body>

	<!-- 
	form表单容器 用来收集用户信息，传给其他页面进行处理
	action 要传的页面
	 -->
	 <form action="./13-服务器接收数据.html">
	 	<p>普通的输入框</p>

	 	<!-- 
			input 表单元素，同行显示，可以设置宽高，是一个行内块元素
			placeholder：文本框提示内容
			password：密码
			value :默认值
			readonly只读，readonly="true"可以写成readonly
			disabled:禁用

			type的类型
			--text:文本输入框
			--password ：密码输入款
			--radio 单选框  name值相同，可以实现单选
			checkbox 复选框
			submit：提交按钮
			reset：重置按钮
			button:普通按钮
			file：上传文件
	 	 -->

	 	请输入用户名：<input type="text" name="name" placeholder="请输入用户名" value="李四" readonly="true"><br />
	 	密码： <input type="password" name="password" placeholder="请输入密码" value="123456" disabled="true" >

	 	<p>lable绑定的input（提升用户体验）</p>
	 		<label for="a">银行卡号：</label>	 <input type="text" name="bank" id="a"><br />
	 		<label for="b">银行密码：</label>     <input type="password" name="bankpass" id="b"><br />

	 	<!-- 聚焦/失去焦点 	 -->

	 	<p>单选框radio</p>
	 	<input type="radio" name="sex" id="sex1" checked> <label for="sex1">男</label> 
	 	<input type="radio" name="sex" id="sex2"><label for="sex2">女</label> 

	 	<p>复选框checkbox</p>
	 	<input type="checkbox" name="" id="s1"><label for="s1">唱</label>
	 	<input type="checkbox" name="" id="s2" disabled><label for="s2">跳</label> 
	 	<input type="checkbox" name="" disabled>rap
	 	<input type="checkbox" name="">打篮球

	 	<p>提交按钮submit</p>
	 	<input type="submit" name="" >

	 	<p>重置按钮reset</p>
	 	<input type="reset" name="">

	 	<p>按钮button</p>
	 	<input type="button" name="" value="按钮" onclick="alert('别点我，很烦！')">


	 	<p>下拉框select</p>
	 	<select>
	 		<option>男</option>
	 		<option>女</option>
	 		<option>未知</option>
	 	</select>

	 	<select>
	 		<optgroup label="身高">
	 			<option>高</option>
	 			<option>矮</option>
	 		</optgroup>

	 		<optgroup label="身材">
	 			<option>胖</option>
	 			<option>瘦</option>	

	 		</optgroup>
	 	</select>

	 	<p>文本域</p>
	 	<!--  文本域 cols："宽度"； rows:"高";文本域里的文字能够自动换行，当文字过多时会产生进度条 -->
	 	<textarea cols="20px" rows="5px"></textarea>

	 	<p>input 剩余属性 image file hidden</p>
	 	<!-- image将图片作为提交按钮，两个额外的数据点x，y -->
	 	<input type="image" name="" src="./image/002.webp" width="150px">

	 	<input type="file" name="">
	 	<input type="file" name="" disabled>
		<!-- 隐藏字段  -->
	 	<input type="hidden" name="">

	 </form>
</body>

</html>