H5全栈_form表单

最新推荐文章于 2023-07-18 17:36:02 发布

AKIRAZXX

最新推荐文章于 2023-07-18 17:36:02 发布

阅读量278

点赞数 1

分类专栏： html/css 文章标签： form 表单 html

本文链接：https://blog.csdn.net/AKIRAZXX/article/details/97953285

版权

html/css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

form表单

作用：用于获取用户输入，进行数据交互

form的属性

1、cation 指向后台的接口地址
2、method（提交表单方式，请求方式）
get 参数在url后，在地址栏可以看到；传输参数有限制，传递参数较少
post 放在请求体里，看不到；传递参数没有限制，安全系数高
a、get方式格式:查询字符串(k=v&k=v)
请求头:
url？k=v&k=v
请求体：
content-size:12
user-agent：mac safari
b、post方式格式可以自定义
请求头：
url
请求体:
content-size:12
user-agent：mac safari
k=v&k=v
其他传递方式：
查询字符串（见上方）
json字符串

 '{"username":"terry","password":123321}'

xml

<date>
  <username>terry</username>
  <passwd>123</passwd>
</date>

3、enctype 编码格式
编码，对参数进行编码
application、
x-www-form-urlencoded

注意

1、所有表单元素都必须添加name属性
2、不可输入但可以选择的表单元素一定要添加value值；可输入的表单元素的value值为用户输入的值

表单元素

A、input：

接受来自用户的数据

type

1、基本
text 单行文本框
password 密码框
radio 单选按钮
checkbox 复选按钮
submit 提交按钮
file 附件，文件
reset 重置按钮
hidden 隐藏域，不会在页面中显示，但其值会被提交
image 图片
2、H5中对type的拓展:number；date；search搜索框；email

name：

作为参数key值存在

value：

可以选择（单选按钮/复选按钮/下拉菜单）但不可以输入的元素，必须添加value，当选中该元素时，这个元素的值就是value指定的值
在可以输入的元素中（单行文本框，密码框）如果添加value表示默认值

placeholder：

输入框背景文字，当用户输入信息时文字会消失

checked：

设置单选及复选按钮的默认选中

B、select 下拉菜单

option (value、disabled:见下、selected:选项默认被选中)
optgroup (value、disabled:见下、selected:选项默认被选中)
multiple 表示是否允许多选
size
disabled 表示禁用主键，禁用主键的值也不可以被提交
name

C、textarea 多行文本框

rows 文本框行数
cols 文本框列数
warp 是否自动换行(off 不自动换行;hard 自动硬换行;soft自动软换行)
disabled
readonly 只读，其值依然会被提交
name

D、富文本（用第三方库）

E、上传插件（第三方库）

应用

<body>
	<form cation="" method="post">
		<table>
			<tbody>
			<tr>
				<td>用户名</td>
				<td><input placeholder="请输入用户名" type="text" name="username"></td>
				<!-- placeholder 输入框背景文字，当用户输入信息时文字会消失 -->
			</tr>
			<tr>
				<td>密码</td>
				<td><input type="password" name="password"></td>
			</tr>
			<tr>
				<td>确认密码</td>
				<td><input type="password" name="password"></td>
			</tr>
			<tr>
				<td>性别</td>
				<td>
				<label for="gender_male">
					<input id="gender_male" type="radio" name="gender" value="male">男
				</label>
				<label for="gender_female">
					<input id="gender_female" type="radio" name="gender" value="female">女
				</label>
				<!-- 用label把单选框包起来，便可以通过点旁边的字选中按钮 -->
				</td>	
			</tr>
			<tr>
				<td>出生日期</td>
				<td><input type="date" name="birth"></td>
				<!-- date H5中的拓展 -->
			</tr>
			<tr>
				<td>爱好</td>
				<td>
				<label for="hobby_football">
				<input id="hobby_football" type="checkbox" name="hobby" value="football">足球
				</label>
				<label for="hobby_sing">
				<input id="hobby_sing" type="checkbox" name="hobby" value="sing">唱歌
				</label>
				<label for="hobby_read">
				<input id="hobby_read" type="checkbox" name="hobby" value="read">阅读
				</label>
				<label for="hobby_swim">
				<input id="hobby_swim" type="checkbox" name="hobby" value="swim">游泳
				</label>
				<!-- 复选框 checkbox -->
				</td>
			</tr>
			<tr>
				<td>地址</td>
				<td>
				<!-- select 下拉菜单 selected默选项-->
				<span>
					<select name="shengfen" style="width: 80px">
						<option>江西</option>
						<option selected="zhejiang">浙江</option>
						<option>江苏</option>
						省
					</select>
				</span>
				<span>
					<select name="shi" style="width: 80px">
						<option>上饶</option>
						<option selected="zhejiang">杭州</option>
						<option>苏州</option>
						市
					</select>
				</span>
				<span>
					<select name="qu" style="width: 80px">
						<option>信州</option>
						<option selected="zhejiang">西湖</option>
						<option>姑苏</option>
						区
					</select>
				</span>
				<span>
					<input type="text" name="more" placeholder="详细地址">
				<!-- 加入一个文本框 -->
				</span>
				</td>	
			</tr>
			<tr>
				<td>个人经历</td>
				<td>
					<textarea placeholder="请输入" wrap="soft" cols="30" rows="5"></textarea>
					<!-- 多行文本框 wrap是否换行-->
				</td>
			</tr>
			<tr>
			<td><input type="submit" name="tijiao" value="注册"></td>
			</tr>
		</table>
	</tbody>
	</form>
</body>

效果图
在这里插入图片描述

AKIRAZXX

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5全栈_form表单

Day 6form表单作用：用于获取用户输入，进行数据交互form的属性1、cation 指向后台的接口地址2、method（提交表单方式，请求方式）get 参数在url后，在地址栏可以看到；传输参数有限制，传递参数较少post 放在请求体里，看不到；传递参数没有限制，安全系数高a、get方式格式:查询字符串(k=v&k=v) 请求头: url？k=v&...
复制链接

扫一扫