form表单

一:概念

<form>标签用于创建HTML表单

form元素是块级元素,它的前后会拆行

表单用于向服务器传输数据,action指定向何处发送表单数据

表单可包含input、lable、textarea、select

二:表单中可包含input标签

type属性含义
text文本框(单行)
passward密码框
submit提交按钮
radio单选按钮
checkbox多选按钮
button普通按钮
reset重置按钮
image按钮为图片
hidden隐藏域(不建议)
file文本域(并未真正选上文件)
email邮箱输入
number数字输入
color颜色选择
date日期
datetime-local日期及时间
time时间
range进度条

 

lable标签是为input标签定义的标签(不会给用户展示任何样式)

 

三:可包含textarea标签

cols以字符个数设定的多行文本框宽度
rows

以字符个数设定的多行文本框高度

 

四:可包含select标签

option设置选项内容
multiple将选项全部显示
selected默认选项

 

五:常用属性method

常用有get和post,method属性规定如何发送表单数据

GET——用于从指定资源请求数据

(不安全,将name属性信息暴露在地址栏,地址默认大小64kb)

POST——用于将数据发送到服务器来创建/更新资源

(安全,不会暴露信息在地址栏)

 GETPOST
刷新无害数据会被重新提交(浏览器应该告知用户数据会被重新提交)
书签可收藏为书签不可收藏为书签
历史参数保留在浏览器历史中参数不会保存在浏览器中
对数据长度的限制URL 的最大长度是 2048 个字符无限制
安全性所发送的数据是 URL 的一部分参数不会被保存在浏览器历史或 web 服务器日志中
可见性数据在 URL 中对所有人都是可见的数据不会显示在 URL 中

 

六:表单展示

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>练习</title>
</head>
<body align=center bgcolor="#e3dede">
<h2>用户注册</h2>
<form methed="post" >
	<p>用户名:<input type="text" placeholder="请输入您的用户名"></p>
    <p>密码:<input type="pswd" placeholder="请输入您的密码" required autofocus></p>
    <p>请选择您的性别:<input type="radio" name="xb" value="男" >男
    <input type="radio" name="xb" value="女" >女</p>
    <p>请选择您的爱好:<input type="checkbox" name="hobby" value="足球" >足球 
    <input type="checkbox"  value="篮球">篮球
    <input type="checkbox"  value="LOL">LOL
    <input type="checkbox"  value="足球">足球
    <input type="checkbox" value="韩剧">韩剧
    <input type="checkbox"  value="王者荣耀">王者荣耀 </p>
    <p>邮箱:<input type="email" placeholder="请输入您的邮箱"></p>
    <p>用户头像:<input type="file" ></p>
    <p>您的家庭地址是:<select>
    	<option value="西安">西安</option>
    	<option value="上海">上海</option>
    	<option value="重庆">重庆</option>
    	<option value="湖南">湖南</option>
    </select></p>
       <p>您的收获地址是:<select multiple="">
    	<option value="永川">永川</option>
    	<option value="江北">江北</option>
    	<option value="万州">万州</option>
    	<option value="重庆">重庆</option>
    </select></p>
<p>请留下你的建议和意见:<textarea cols="20"  rows="15" placeholder="您的建议和意见"></textarea></p>
<p>请选择你喜欢的颜色:<input type="color">
注册的时间:<input type="datetime-local"></p>
<p><input type="submit" value="注册">
<input type="reset"></p>

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

 

 

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值