＜HTML学习＞表单（2）

徐记荣

已于 2022-02-27 20:15:50 修改

阅读量131

点赞数

分类专栏： Html学习文章标签： html 学习前端

于 2022-02-27 19:36:35 首次发布

本文链接：https://blog.csdn.net/m0_37638874/article/details/123165057

版权

Html学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>form表单学习</title>
	</head>
	<body>
		<form method="post" action="" enctype="application/x-www-form-urlencoded">
			帐号:<input type="text" name="username" size="30" maxlength="10" value="admin"/><br/>
			密码:<input type="password" name="password" size="30" /><br />
			<input type="hidden" name="token" value="123"/>
			<input type="submit" value="提交"/>
			<input type="reset" value="重置"/>
		</form>
		<form method="post" action="" enctype="multipart/form-data">
			<input type="file" name="file"/>
			<input type="submit" value="提交"/>
		</form>
			<form method="post" action="" enctype="multipart/form-data">
			<input type="file" name="file"/>
			<input type="button" value="提交"/>
		</form>
			<form method="get" action="" enctype="multipart/form-data">
			<input type="text" name="search"/>
			<input type="submit" value="搜索"/>
			</form>
			<form method="get" action="" enctype="multipart/form-data">
			<textarea rows="10" cols="20">
			</textarea > 
			<select name="address">
				<option value="beijing">HTML</option>
				<option value="shanghai">XML</option>
				<option value="guangzhou">Javascript</option>
			</select>
			</form>
	</body>
</html>

表单

<from method="post" action="" enctype="application/x-www-form-urlencoded">

</from>

1.post和get

method="post"

表单提交方式，除此之外还有

method="get"

get提交方式会附加到URL中，而post提交方式不会，get方式不适合敏感信息的提交，如账号、密码，get与post提交方式可参考HTTP协议概念
或详见
GET与POST的区别?APPLICATION JSON与FORM表单的区别?
表单提交post和get的最大区别
引用一下，希望博主不要干我

2.action

action=""

action是指将表单提交到何处

3.enctype

enctype="application/x-www-form-urlencoded"

EncType表明提交数据的格式用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型，除此之外还有

enctype="multipart/form-data"

enctype="text/plain"

application/x-www-form-urlencoded：窗体数据被编码为名称/值对。这是标准的编码格式。 multipart/form-data：窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分 text/plain：窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。
详见ajax中的application/x-www-form-urlencoded中的使用

input

<input type="text" name="username" size="30" maxlength="10" value="admin"/><br/>
<input type="password" name="password" size="30" /><br />
<input type="hidden" name="token" value="123"/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<input type="file" name="file"/>
<input type="button" value="提交"/>

input是输入标签，其中type用来定义格式：text、password、hidden、submit、reset、file、button等等其中text可以设定maxlength=“10”，最大输入长度，未输入前初始值value=“admin”

textarea

<textarea rows="10" cols="20">
</textarea >

rows和cols分别对应默认的行和列，即文本域默认大小，但文本域是可以拖动的

select

<select name="language">
	<option value="html">HTML</option>
	<option value="xml">XML</option>
	<option value="javascirpt">Javascript</option>
</select>

select是一个下拉选择框，提交表单我们传的值是langues:(html/xml/javascript中的一个)，我们传的值是value的值
选择框还有
单选框：radio
多选框：checkbox

徐记荣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
＜HTML学习＞表单（2）

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>form表单学习</title> </head> <body> <form method="post" action="" enctype="application/x-www-form-urlencoded"> 帐号:<input type="text
复制链接

扫一扫