web前端学习笔记——Day2

原创于 2019-05-07 23:56:09 发布 · 248 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

web前端学习笔记

该博客主要介绍了HTML表单标签form，表单用于向服务器传输数据，包含input、textarea等元素。阐述了表单属性，如action、method（get和post），还介绍了表单元素中input标签的属性和对应值、select下拉框标签属性、textarea文本域等内容。

六、表单标签form

表单用于向服务器传输数据。

表单能够包含input元素；比如文本字段、复选框、单选框、提交按钮等。

表单还可以包含textarea、select、fieldset和label元素。

1、表单属性

HTML表单用于接收不同类型的用户输入，用户提交表单时1向服务器传输数据，从而实现用户与web服务器的交互。表单标签，要提交的所有内容都应该在该标签中。

action：表单提交到哪？一般指向服务器端一个程序，程序接收到表单提交过来的数据（及表单元素值）作相应的处理，比如http://www.sohou.com/web

method：表单的提交方式post/get默认取值就是get（信封）

get：1、提交的键值对放在地址栏url后面

2、安全性相对较差

3、对提交内容的长度有限制

post: 1、提交的键值对不在地址栏

2、安全性相对较高

3、对提交的内容长度理论上没有限制

get/post是常见的两种请求方式。

2、表单元素

1）、input 标签的属性和对应值

类型（type）：text 文本输入框 password 密码输入框 radio 单选框

checkbox 多选框 submit 提交按钮 button 按钮（需要配合js使用） file 提交文件：form表单需要加上属性 enctype=“multipart/form-data”

name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和js中使用的。

value：表单提交项的值，对于不同的输入类型，value属性的用法也不同。

type="button","reset","submit"---定义按钮上的显示的文本
type="text","password","hidden"--定义输入字段的初始值
type="checkbox","radio","image"--定义与输入相关联的值

checked: radio和checkbox默认被选中
readonly: 只读text和password
disabled: 对所用input都好使

上传文件注意两点：

1、请求方式必须是post

2、enctype=“multipart/form-data”

下载文件
def index(request):
	print request.POST
	print request.GET
	print request.FILES
	for item in request.FILES:
		fileObj = request.FILES.get(item)
		f = open(fileObj.name,'wb')
		iter_file = fileObj.chunks()
        for line in iter_file:
        	f.write(line)
        f.close()
	return HttpResponse('OK')

eg：举例
<!DOCTYPE html>
<html>
<head>
	<title>wzq</title>
</head>
<body>
	<h1>注册页面</h1>
	<form action="发送/处理 数据的路径" method="post" enctype="multipart/form-data">
		用户名：<input type="text" name="username" placeholder="用户名"></br>

		密码：<input type="password" name="password" placeholder="密码"></br>

		爱好：    音乐<input type="checkbox" name="hobby" value="1">电影<input type="checkbox" name="hobby" value="2"></br>

		性别：   男<input type="radio" name="xb" value="man">女<input type="radio" name="xb" value="woman"></br>

		<input type="file" name="wenjian"></br>

		<input type="submit" value="提交注册"></br>
		<input type="reset" value="重置"></br>

	</form>
</body>
</html>

2）、select 下拉框标签属性

name：表单提交项的键	size：选项个数	multiple：多选
<option>:下拉选中的每一项 属性；	value：表单提交项的值
selected：下拉选默认被选中	<optgroup>:为每一项加上分组

eg：1、
<!DOCTYPE html>
<html>
<head>
	<title>下拉框</title>
</head>
<body>
	省<select name="province" multiple size="2">
		<option value="shanxi" selected>陕西</option>
		<option value="henan">河南</option>
		<option value="jiangxi">江西</option>
		<option value="shandong">山东</option>
	</select>
</body>
</html>


eg：2、分组
<!DOCTYPE html>
<html>
<head>
	<title>下拉框</title>
</head>
<body>
	国<select name="province">
		<optgroup label="中国">
			<option value="shanxi" selected>陕西</option>
			<option value="henan">河南</option>
			<option value="jiangxi">江西</option>
			<option value="shandong">山东</option>
		</optgroup>
		
	</select>
</body>
</html>

3）、textarea 文本域

name：表单提交项的键	cols：文本域默认有多少列	rows：文本域默认有多少行
eg：
简介<textarea name="desc" rows="5" cols="5"></textarea>

label标签（了解）

<label for="wzq">用户名</label>
<input id="wzq" type="text" >
#当for和id相等时，两句关联

fieldset标签（了解）

<fieldset>
	<legend>登陆吧</legend>
	<input type="text">
</fieldset>

标签

#web前端