form-表单标签:

1.form-表单标签:

form标签一般会与"input".“select”."textarea"等标签连用。
属性:
action-跳转路径
method-用以明确表单提交的方式(get/pust)默认值是get
name-表单的名称
(get请求会把用户信息暴露在地址栏上)
在这里插入图片描述

在这里插入图片描述在这里插入图片描述

pust相较于get比较安全
在这里插入图片描述

路径:
1.绝对路径:从盘符开始,找到你所需要的文件的路径:路径+文件的名称
C:\Users\clown\Desktop\演示\demo01.html
2.相对路径:当前源文件和目标文件的相对位置
./demo01.html

input标签:
语法:(name一般可不写)
在这里插入图片描述

type取值:

取值含义
text文本框
password密码框
radio单选按钮
checkbox多选按钮
submit提交按钮
reset复位按钮
button普通按钮
image图像按钮
file文本域(上传文件的按钮)
hidden隐藏域
emali邮箱按钮
color颜色按钮
date日期
time时间
datetime-local日期加时间
range进度条

input属性:

属性含义
checked默认选择
readonly只读(字段只可以读不能修改)
disabled禁用(不可点击)
autofocus默认光标位置
required不能为空白提交

演示:
text–文本框
password–密码框
在这里插入图片描述在这里插入图片描述

加上value后:

在这里插入图片描述

在这里插入图片描述

radio–单选按钮
在这里插入图片描述这里就需要同时输入name属性以确保单选功能的实现。
在这里插入图片描述
也可以加入"checked"属性,就行默认选定。
在这里插入图片描述在这里插入图片描述
checkbox–多选按钮(也可以加入"checked"默认选项)
在这里插入图片描述在这里插入图片描述
email–邮箱按钮(由于"disabled"属性的使用,此时邮箱内的内容是不可点击修改的)
在这里插入图片描述在这里插入图片描述
file–文本域按钮(上传文件)
在这里插入图片描述在这里插入图片描述此时系统只支持选择一个文件,若需选择多个文件可以加上"multiple"属性。

2.select-下拉列表框标签:

一般与"option"标签进行连用。
在这里插入图片描述(这个"value"属性我们现在用不到,可以删掉不管)
在这里插入图片描述
在这里插入图片描述
使用"selected"默认选择属性

在这里插入图片描述
在这里插入图片描述
使用"multiple"多选项属性,可以列表形式出现。
在这里插入图片描述在这里插入图片描述
(这里的"name"和"id"属性一样用不到,可删去不管。)

3.textarea-文本域标签:

cols=“30”–多少列–表示文本域的宽度。
rows=“10”–多少行–表示文本域的长度。
在这里插入图片描述在这里插入图片描述
注意:以上介绍的各类标签如:“input”,“select”,"textarea"须在"form"表单标签里进行使用,以达到预期功能。(将上面的各功能组合使用就获得了一个最基础的登录注册页面)
在这里插入图片描述(align是位置属性,bgcolor是背景颜色属性,background背景图片属性:一般情况下,浏览器优先级不同,会对背景颜色和背景图片进行取舍)
在这里插入图片描述

(“color”,“datetime-local”,“submit"和"reset"属性分别是颜色选择,日期,提交和复位,还有其他的一些功能作者没有着重介绍,读者可以自己尝试)
在这里插入图片描述到此一个基础的注册登录页面就完成了,点击提交的话,系统就会按照你所提供的路径进行相应跳转。
在这里插入图片描述在这里插入图片描述在这里插入图片描述(跳转路径输入action=”./demo01.html"有两种方式)
(1)找到你要跳转的文件"右键"+“复制相对路径”
在这里插入图片描述在这里插入图片描述(2)输入"./"系统会自动提示让你选择
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值