Html5-----表单标签

最新推荐文章于 2024-09-28 14:06:20 发布

@深邃

最新推荐文章于 2024-09-28 14:06:20 发布

阅读量121

点赞数

CC 4.0 BY-SA版权

文章标签： Html表单标签

本文链接：https://blog.youkuaiyun.com/chenyun1997/article/details/99762132

本文详细介绍了HTML中的form标签及其各种属性，包括action和method的作用，以及input标签的不同类型如text、password、radio、checkbox等的使用方法。同时，还讲解了select、textarea等元素的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、form标签

常见属性：action：表示动作，值为服务器地址，把表单的数据提交到该地址上处理。

method：请求方式：get 和 post

get：地址栏会显示用户输入参数

不安全

效率高

get请求大小有限制，不同浏览器不同，大约2kb

post：地址栏不出现参数

安全可靠

效率低

post请求大小理论上无限

input标签：

<tr>
					<td>姓名</td>
					<!--text 文本框  输入内容-->
					<td><input type="text" name="userName" id="userName" value="" /></td>
				</tr>
				<tr>
					<td>密码</td>
					<!--password 密码框   密文或者掩码-->
					<td><input type="password" name="userPwd" id="userPwd" value="" /></td>
				</tr>
				<tr>
					<td>性别</td>
					<td>
						<!--radio 表示单选。name必须一致 否则可多选，valu值传入服务器-->
						<input type="radio" name="gender" id="gender" value="boy" />男
					    <input type="radio" name="gender" id="gender" value="girl"/>女
					</td>
				</tr>
				<tr>
					<td>爱好</td>
					<td>
						<!--checkbox 多选框 name值必须一致 可以多选 返回值是一个数组-->
						<input type="checkbox" name="hobby" id="hobby" value="eat" />吃
						<input type="checkbox" name="hobby" id="hobby" value="drink" />喝
						<input type="checkbox" name="hobby" id="hobby" value="play" />玩
						<input type="checkbox" name="hobby" id="hobby" value="happy" />乐
					</td>
				</tr>
				
				<tr>
					<td>上传文件</td>
					<td>
						<input type="file" name="picture" id="picture" />
					</td>
				</tr>
				<tr>
					<td>
						<!--按钮不需要name属性  按钮上的文字可以使用value属性-->
						<input type="submit" id="login" value="登录" />
						<input type="button" value="点击" onclick="alert('点我干嘛！')" />
						<input type="reset" value="重置" />
					</td>
				</tr>
				<tr>
					<td>
						<!--隐藏  不让使用者看到 服务器可以接收value值-->
						<input type="hidden" id="hiddenValue" value="你好" />
					</td>
				</tr>

select标签：

select标签添加该属性multiple="multiple"表示多选、size表示显示的个数

<tr>
					<td>城市</td>
					<td><select name="city">
						<option value="">北京</option>
						<option value="">上海</option>
						<option value="">广州</option>
						<option value="">深圳</option>
					</select></td>
				</tr>

textarea元素：

<textarea cols="100" rows="5"> 表示5行100列的区域可以输入内容，该元素没有value属性