HTML表单

最新推荐文章于 2024-04-24 14:37:39 发布

雷蒙96

最新推荐文章于 2024-04-24 14:37:39 发布

阅读量179

点赞数

分类专栏： HTML 文章标签： HTML form

本文链接：https://blog.csdn.net/weixin_41298721/article/details/88199720

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

form表单

属性：

Name 表单的识别名称。通过表单的名称来辨认页面提交的是哪个表单的数据。
Action 处理表单程序的地址。action="index.html"
Method 将表单中的数据提交到服务器的方法。Method是常用的两个取值get和post

get方法

默认的一种传递数据的方法（查询用get），get传输速度快，通过get提交表单，数据可在地址栏上看见

特点：

通过地址来传递表单中的数据
不能传递敏感的数据,如:密码
不能传递大量的数据,每次只能传递1024字节
不能上传附件

post方法

不是通过地址栏传递数据，数据传递给文件处理程序。（增删改用post）

特点：

相对安全
可以传递海量的数据
能上传附件

何时使用get和post?

如果表单提交是被动的(比如搜索引擎查询),并没有敏感信息。当你使用get时,表单数据在页面地址栏中是可见的。比如：search.html?name=john&age=25，注：get最适合少量数据的提交，浏览器会设定容量限制。
如果表单正在更新数据，或者包含敏感信息。如：密码，则使用Post的安全性更好，因为在页面地址栏中被提交的数据时不可见的。

常用的input的type的属性值：

text：文本框
password：密码框
image：图片按钮
radio：单选按钮
checkbox：多选按钮
file：上传
reset：重置按钮
submit：提交按钮
button：普通按钮

value属性：给输入框添加默认值

size：指定表单元素的初始宽度。当 type 为 text 或 password时，maxlength：设置输入框最大能输入多少字符

   select：列表框
   option：列表框选项
   selected="selected"：默认选项

textarea：多行文本域
rows：文本域可见高度
cols：文本域可见宽度

注意：如果使用上传必须把enctype属性值改成"multipart/form-data"

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
   <form action="#" method="post" enctype="multipart/form-data">
   	<span>账户：</span>
   	<input type="text" name="userName" id="userName" value="呵呵"  size="10"/>
   	<br />
   	<span>密码：</span>
   	<input type="password" name="pwd" id="pwd" maxlength="10" />
   	<br />
   	<input type="image" src="../img/logo.jpg" name="btmimg"  id="btnimg"/>
   	<br />
   	<span>性别：</span>
   	<!--checked="checked":单选按钮默认选中-->
   	<input type="radio" name="sex" id="sex" checked="checked"  />男
   	<input type="radio" name="sex" id="sex1"/>女
   	<br />
   	<span>爱好：</span>
   	<input type="checkbox" name="hobby" value="1" />看书
   	<input type="checkbox" name="hobby" value="2" />唱歌
   	<input type="checkbox" name="hobby" value="3" />跳舞
   	<input type="checkbox" name="hobby" value="4" />游戏
   	<br />
   	<span>上传</span>
   	<input type="file" name="file" id="file" />
   	<br />
   	<span>颜色：</span>

   	<select name="color" id="color">
   		<!--<option>--请选择--</option>-->
   		<option value="red">红色</option>
   		<option value="yellow">黄色</option>
   		<option value="blue">蓝色</option>
   		<option selected="selected">--请选择--</option>
   	</select>
   	<br />
   	<span>备注：</span>

   	<textarea name="desc" rows="10" cols="10"></textarea>
   	<br />
   	<!--提交按钮-->
   	<input type="submit" value="提交" />
   	<!--重置按钮-->
   	<input type="reset" />
   	<!--disabled="disabled" :按钮禁用-->
   	<input type="button" value="查询" disabled="disabled" />
   </form>
</body>
</html>

雷蒙96

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML表单

form表单属性： Name 表单的识别名称。通过表单的名称来辨认页面提交的是哪个表单的数据。 Action 处理表单程序的地址。action="index.html" Method 将表单中的数据提交到服务器的方法。Method是常用的两个取值get和postget方法默认的一种传递数据的方法（查询用get...
复制链接

扫一扫