Python学习 Day17 Form表单

form表单

  • form表单:在web网页中收集用户填写的信息,从而使网页具有交互功能
  • 一般是将表单设计在一个HTML文档中,当用户填写完信息后做提交(submit)操作,将表单信息传送到服务器进行处理后,再将用户所请求资源返回个客户端
  • 所有用户输入的地方都使用表单来填写,如登录注册,搜索框
  • 一个表单应包含:用户填写信息的输入框,提交按钮等控件
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
<form action="aaa" method="get">
			用户名:<input type="text" name="username" /><br />&emsp;码:<input type="password" name="pwd" /><br />
			<!--提交按钮-->
			<input type="submit" />
		</form>
		用户名2<input type="text" name="username2" />
	</body>
</html>

Python学习 Day17 Form表单_第1张图片

Python学习 Day17 Form表单_第2张图片

  • form表单会采集包含的有效数据,提交到后台,进行交互

  • 【1】action属性

  • 地址栏信息:
    http://127.0.0.1:8020/Form%E8%A1%A8%E5%8D%95/aaa?username=%E4%B8%BD%E4%B8%BD&pwd=123

      	?之前是提交的资源的目标地址
      	?之后是提交的具体数据
      	
      	HTTP:信息交互遵照HTTP协议
      	127.0.0.1 :代表本机的IP地址(自动获取)
      	8020:Hbuilder内置服务器的端口号
      	Form%E8%A1%A8%E5%8D%95:项目名字(Form表单)
      	注意:浏览器的地址是不支持中文的,都会转成编码传送,若浏览器中有中文,只是当前浏览器给你的一个友好的提示
      		 可以使用在线的解析工具查看:URLencode
      	aaa:目标资源(在当前项目下寻找)
      	
      	?后的内容:
      	username=%E4%B8%BD%E4%B8%BD&pwd=123
      	我们写的文本框、密码框等必须要加入一个属性:name
      	然后name属性和具体录入信息会组成一个键值对的形式
      	多个键值对之间,用“&”符号进行拼接
      	注意:只有放在form表单中的内容才会被收集提交
    
    • 【2】method属性:默认情况下不写method属性的时候相当于method=“get”
      get(默认):提交的数据可见,不安全,提交数据长度有限制,效率高
      post:提交的数据不可见,安全,提交数据长度无限制,效率低

模拟百度搜索

  • 1.右键-查看源代码-找到图标的link标签复制

Python学习 Day17 Form表单_第3张图片

  • 2.解析百度搜索过程
    Python学习 Day17 Form表单_第4张图片
    在这里插入图片描述
    代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>百度一下,你就知道</title>
		<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
	</head>
	<body>
		<form action="https://www.baidu.com/s" method="get">
			<!--文本框-->
			<input type="text" name="wd"/>
			<!--提交按钮-->
			<input type="submit" value="百度一下" />
			
			
		</form>
	</body>
</html>

效果
在这里插入图片描述


表单元素

  • input标签使用广泛,通过type属性的不同值,来表现不同的形态
  • 表单元素必须有一个属性:name,有了name才可以提交数据,才可以采集数据,然后提交的时候会以键值对的形式拼到一起
  • value:文本框中的具体内容
  • 键值对: name=value
  • 如果value提前写好,那么默认效果就是value中内容
  • 一般默认提示语:用placeholder属性,不会用value,因为value只是文本框中的值
  • readonly:只读,只是不能修改,但是其他操作都可以,可以正常提交
  • disabled:禁用,完全不可用,不能正常提交
  • 写法:
    readonly=“readonly”
    readonly
    readonly=“true”
  • 1.文本框:里面文字可见
<!--文本框
				type="text" 文本框,里面文字可见
			-->
			<input type="text" name="nname"  placeholder="请输入身份信息"/>
			<input type="text" name="unname2" value="123" readonly="readonly" />
			<input type="text" value="456" disabled="disabled"/>
  • 2.密码框:里面文字不可见
<input type="password" name="pwd" />
  • 3.单选按钮:
  • 注意:一组单选按钮必须通过name属性来控制,让它们在一个分组中,然后在一个分组里只能选一个
  • 正常转态下,提交数据为value=on,后台不能区分你提交的数据
  • 不同选项的value值要控制为不同,这样后台接受就可以区分了
性别:
   		<input type="radio" name="gender" value="1" checked="checked"/><input type="radio" name="gender" value="0"/>
  • 4.多选按钮:
  • 一组多选按钮必须通过name属性来控制,让它们在一个分组中,然后在一个分组里可以选多个
  • 不同选项的value值要控制为不同,这样后台就可以区分了
  • 多个选项提交的时候,键值对用&符号进行拼接,例如下:
    falan=1&falan=2
你喜欢的语言:
			<input type="checkbox" name="falan" value="1" checked="checked" />java
			<input type="checkbox" name="falan" value="2" checked="checked"/>python
			<input type="checkbox" name="falan" value="3"/>go
			<input type="checkbox" name="falan" value="4"/>c#
  • 5.文件
<input type="file" />
  • 6.隐藏域(不是自己写入但仍进行提交的数据)
<input type="hidden" name="unname6" value="123" />
  • 7.按钮
  • (1)普通按钮
  • 普通按钮没有什么效果,就是可以点击,学习js之后,可以加入事件
<input type="button" value="普通按钮" />
  • (2)特殊按钮:重置按钮
  • 将页面恢复到初始状态
<input type="reset" />
  • (3)特殊按钮:图片按钮
<img src="img/人生海海.jpg" />
  • (4)特殊按钮:提交按钮
  • 具备提交功能
<input type="submit" />
  • 8.下拉列表
  • 默认选中:selected=“selected”
    多选:multiple=“multiple”
你喜欢的城市:
			<select name="city" multiple="multiple">
				<option value="0">---请选择---</option>
				<option value="1">杭州</option>
				<option value="2" selected="selected">上海</option>
				<option value="3">南京</option>
				<option value="4">苏州</option>
				<option value="5">西安</option>
			</select>
  • 9.多行文本框
  • 利用CSS样式来控制大小不可变:tyle=“resize: none;”
自我介绍:
			<textarea style="resize: none;" rows="10" cols="30">请在这里填写信息</textarea>
  • 10.label标签
  • 一般会在想要获得焦点的标签上加一个id属性,然后label中的for属性跟id配合使用
<label for="uname">用户名:</label><input type="text" name="username" id="uname" />

组合效果
Python学习 Day17 Form表单_第5张图片

你可能感兴趣的:(前端)