IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> web前端学习(四)——HTML 表单(1)- 用户注册表单举例 -> 正文阅读

[JavaScript知识库]web前端学习(四)——HTML 表单(1)- 用户注册表单举例

表单:就是类似于登录界面,用于接收用户的信息。(如下图的微博登录界面所示)

?表单以<form>开始,以</form>结束。
1、表单有什么用?
? ? ? ? 收集用户信息。表单展现之后,用户填写表单,点击提交按钮提交数据给服务器。
2、怎么画一个表单?
? ? ? ? 使用form标签画表单。
3、一个网页当中可以有多个表单form。
4、表单最终是需要提交数据给服务器的,form标签有一个action属性,这个属性用来指定服务器地址:action属性和超链接中的href属性一样,都可以向服务器发送请求(request)
5、<form action="http://192.168.111.3:8080/oa/save"> </form> :? ? ? ? ? ? ? ?
????????其中 http://192.168.111.3:8080/oa/save 是请求路径,表单提交数据最终提交给:192.168.111.3机器上的8080端口对应的软件。

按钮:
1、在网页中需要画一个提交按钮,用来提交表单。
2、画按钮可以使用input输入域,type="submit"的时候表示该按钮是一个提交按钮,具有提交表单的能力。 而button只是一个普通按钮,不具备提交表单的能力。(type后面不能随便写)
3、对于按钮来说,按钮的value属性用来指定按钮上显示的文本信息。如果没有value,显示的是提交。
(有value)
(没有value)
4、text能够显示文本框:<input type=“text”>
(百度按钮前面的文本框)

代码举例:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="http://192.168.111.3:8080/oa/save">
			<input type="submit" value="注册"/>
			
			<input type="button" value="设置按钮上显示的文本"/>
		</form>

<!--这个按钮和普通的超链接没有太大的区别。
			超链接和表单都可以向服务器发送请求,只不过表单发送请求的同时可以携带数据。-->
		<form action="http://www.baidu.com">
			<!--<input type="text">-->
			<input type="submit" value="百度"> 
		</form>

	</body>
</html>


表单(form)和列表(table)相结合的运用:?
1、表单是以什么格式提交给服务器的?(非常重要)
????????http://localhost:8080/jd/login?username=abc&userpwd=116
????????格式:cation?name=value&name=value&name=value&name=value.....
? ? ? ? W3C的HTTP协议规定的,必须以这种格式提交给服务器
重点强调:表单项写了name属性的,一律会提交给服务器;不想提交这一项,就不要写name属性。
文本框和密码框的value不需要程序员指定,用户输入什么,value就是什么。

2、当name没有写的时候,该项不会提交给服务器。
但是当value没有写的时候,value的默认值是空字符串“”,会将空字符串提交给服务器。
Java代码得到的是:string username = " ";

		<form action="http://localhost:8080/jd/login">
			<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;&nbsp;&nbsp;
						<input type="reset" value="清空" >
					</td>
				</tr>
			</table>
		</form>

运行结果:(实际操作中点击登录和清空都会使网页产生反应)
?


form表单method属性:
? ? ? ? get:采用get方式提交的时候,用户提交的信息会显示在浏览器的地址栏上。
? ? ? ? post:采用post方式提交的时候,用户提交的信息不会显示在浏览器的地址上。
? ? ? ? 当用户提交的信息中含有敏感信息,例如:密码,建议采用post方式提交。
method属性不指定,或者指定get,这种情况下都是get。
只有当method属性指定为post的时候才是post请求。
剩下的所有请求都是get请求(如:超链接)

用户注册表单代码举例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册的表单</title>
	</head>
	<body>
		
		<!--
		用户注册:
			用户名
			密码
			确认密码
			性别
			兴趣爱好
			学历
			简介
		-->
		
		<form action="http://localhost:8080/jd/register" method="post">
			用户名 
			<input type="text" name="username">
			<br>
			密码 
			<input type="password" name="userpwd">
			<br>
			确认密码 
			<input type="password" >
			<br>
			性别 
			<input type="radio" name="sex" value="1"> 男
			<input type="radio" name="sex" value="0" checked> 女 <!--单选按钮的value必须手动指定-->
			<br>
			兴趣爱好 
			<input type="checkbox" name="interest" value="smoke"> 抽烟
			<input type="checkbox" name="interest" value="drink" checked> 喝酒
			<input type="checkbox" name="interest" value="fire"> 烫头
			<br>
			学历
			<select name="grade" >
				<option value="gz">高中</option>
				<option value="dz">大专</option>
				<option value="bk" selected>本科</option>
				<option value="ss">硕士</option>
			</select>
			<br>
			简介<!--文本域,文本域没有value属性,用户填写的内容就是value-->
			<textarea rows="10" cols="60" name="introduce"></textarea>
			<br>
			<input type="submit" value="注册">
			<input type="reset" value="清空">
		</form>
		
	</body>
</html>

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-12-10 10:58:30  更:2021-12-10 10:59:36 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 8:00:58-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码