Html5-----表单标签

本文详细介绍了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属性

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值