表单学习form

最新推荐文章于 2022-03-22 15:07:42 发布

yang●xx

最新推荐文章于 2022-03-22 15:07:42 发布

阅读量366

点赞数

CC 4.0 BY-SA版权

分类专栏： html 学习文章标签： form表单学习

本文链接：https://blog.youkuaiyun.com/lucky___dog/article/details/97883420

html 学习专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨HTML5表单的应用，讲解了表单在前后台交互中的作用，详细介绍了form标签及其属性，如action、method和enctype。此外，还阐述了input、select和textarea等元素的使用方法，以及它们在实际场景中的应用。

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

html5-表单学习

表单：前后台交互的入口；用户通过表单把数据传送给后台，后台再把数据交给数据库。
三种形式/用法：

登录页面
登录页面
搜索框（百度一下）

form
属性：action（后台接口地址）
method（请求方式）
enctype （编码方式）

<!-- 指向后台的接口地址 -->
	<form action="http://134.175.154.93:8099/manager/user/saveOrUpdateUser" method="get">
	<a.action> 表示

method（请求方式）
两种请求方式
enctype（编码方式）
1.enctype=‘application/x-www-form-urlencoded’
浏览器就会将参数转换为【查询字符串 qs】格式
2.multipart/form-data
当有附件在表单中的时候，enctype务必设置为这种格式

input 属性

1.type

text 单行文本框
password 密码框
submit 提交按钮
file 附件选择器
radio 单选按钮
checkbox 复选按钮
2.name 不能省略作为参数中的key
3.value 作为参数中的 value 在按钮中必须指定value的值
4.checked 默认选项
5.placeholder 提示语

`

性别

男

女

 		</td>
 		<!-- 爱好 -->
 		<tr>
 			<td>爱好</td>
 			<td>
 				<label >
 					<input type="checkbox" name="hobby" value="basketball">篮球
 					<label >
 						<input type="checkbox" name="hobby" value="football">足球
 					</label>
 					<label >
 						<input type="checkbox" name="hobby" value="reading">阅读
 					
 		</tr>`

select属性
一般与option同时出现，标签中的文本显示在网页中，提交的值应该是option的value值，当这个值没有设定的时候，提交的是标签中的文本。
<option value="sx">山西</option> sx <option>山西</option> 山西

<!--地址  -->
				<tr>
					<td colspan="2">
					<select name="sheng" >
						<option value="js">江苏</option>
						<option value="sx">山西</option>
						<option value="gs">甘肃</option>
					</select>
						省
						<select name="city" >
						<option value="js">运城</option>
						<option value="sx">太原</option>
						<option value="gs">临汾</option>
					</select>
						市
						<select name="city" >
						<option value="js">河津</option>
						<option value="sx">稷山</option>
						<option value="gs">永济</option>
					</select>
						区/县
						<input type="text" name="address">

					</td>
					
				</tr>

textarea 多行文本域
placeholder 提示语

<!-- 个人介绍 -->
		<tr>
			<td>介绍</td>
		 	<td>
		 	<textarea placeholder="请编写个人介绍"  name="description"  cols="40" rows="10"></textarea> 
		 	</td>
		</tr>
			<tr>
				<td colspan="2"><input type="submit" value="注册"></td>
				
			</tr>