HTML5学习日志 --html表单

学习目标:

掌握html表单的应用

学习内容:

表单from
1、表单有什么用?
收集用户信息。表单展现之后,用户填写表单,点击提交按钮提交数据给服务器。
2、怎么画一个表单?
使用form标签画表单。
3、一个网页当中可以有多个表单form。
4、表单最终是需要提交数据给服务器的,form标签有一个action属性,这个属性用来指定服务器地址;
action属性用来注定属性提交给哪个服务器。
action属性和的超链接中的href属性一样。都可以向服务器发送请求(request)

<!-- 
	1、表单有什么用?
		手机用户信息。表单展现之后,用户填写表单,点击提交按钮提交数据给服务器。
	2、怎么画一个表单?
		使用form标签画表单。
		3、一个网页当中可以有多个表单form。
		4、表单最终是需要提交数据给服务器的,form标签有一个action属性,这个属性用来指定服务器地址;
			action属性用来注定属性提交给哪个服务器。
			action属性和的超链接中的href属性一样。都可以向服务器发送请求(request)
-->
<from action="url"><!--url指提交的目标网站 -->
<!-- 画一个提交按钮
	 这个按钮可以使用input输入阈,type="submit"的时候表示这个按钮是一个提交按钮,具有提交表单的能力 -->
<!-- 对于按钮来说,按钮的value属性用来指定按钮上显示的文本信息。 -->
	<input type="sumbit" vaule="登录"/>
	<!-- buutton这是一个普通按钮,不具备提交表单的能力 -->
		<input type="button" />
</from>

表单和超链接没什么太大的区别
超链接和表单都可以向服务器发送请求
超链接没法进行数据收集
表单发送请求的同时还可以携带数据

表单是以什么格式提交给服务器的?
http://localhots:8080/jd/login?username=abc&userpwd=111
格式:
actionname=vaule&namevaule&name=vaule&name=vaule&name=vaule…
HTTP协议规定,必须以这种格式提交给服务器。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<form>
	<table >
		<tr>
			<td>用户名</td>
			<td><input type="text" name="username"/></td>
		</tr>
		<tr>
			<td>密码</td>
			<td><input type="password" name="userpwd"/></td>
		</tr>
		<tr align="center">
			<td colspan="2" >
			<input type="submit" value="登录">
			&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="reset" value="清空"></td>
		</tr>
	</table>
		</form>
	</body>
</html>

multiple=“multiple” 支持多选
在后方添加size,可以设置多选上限

<select multiple="multiple" size="n">

file控件(上传文件)

<input type="file" />

readonly disabled

		<!-- readonly与disabled相同点:都是只读不能修改
		但是readonly可以提交给服务器,disabled数据不会被提交(即使有name属性也不会被提交)-->
		<form action="http://localhost:8080/taobao/save">
			用户代码<input type="text" name="usercode" value="110" readonly />
			<br>
			用户代码<input type="text" name="username" value="120" disabled />
			<br>
			<input type="submit" value="提交数据" />

maxlength
设置文本框中可输入的字符数

<input type="text" maxlength="3">

学习时间:

2021年11月18日

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学习一直在路上

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值