页面跳转和表单

最新推荐文章于 2024-04-29 08:52:32 发布

馒头@Mm

最新推荐文章于 2024-04-29 08:52:32 发布

阅读量576

点赞数

分类专栏：前端笔记文章标签：前端 html css

本文链接：https://blog.csdn.net/yan626413/article/details/125857992

版权

前端笔记专栏收录该内容

9 篇文章 1 订阅

订阅专栏

页面跳转

把a标签的href属性设置为#XXX时，点击这个a标签里面立刻就会跳转到id值为XXX的元素位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面跳转</title>
    <style>
        .box{
            height: 600px;
            background-color: aquamarine;
            margin: 100px 0;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#box1">第一块</a></li>
        <li><a href="#box2">第二块</a></li>
        <li><a href="#box3">第三块</a></li>
        <li><a href="#box4">第四块</a></li>
        <li><a href="#box5">第五块</a></li>
        
    </ul>
    <div id="box1" class="box">第一块</div>
    <div id="box2" class="box">第二块</div>
    <div id="box3" class="box">第三块</div>
    <div id="box4" class="box">第四块</div>
    <div id="box5" class="box">第五块</div>
</body>
</html>

表单（form）

1 . form表单

action：当表单提交的时候，将数据发往何处。

2 . input控件

属性	属性值	描述
type	text	定义文本输入框。
	password	定义密码输入框，输入的内容会被掩盖。
	button	定义可点击的按钮。
	submit	提交按钮，会把表单内的数据提交给服务器。
	reset	重置按钮，清除表单内所有的数据。
	file	文件选择按钮，供文件上传。accept：规定了文件上传的类型，text/*
	image	定义图片形式的提交按钮，必须把src属性和image结合使用。
	checkbox	定义复选框。
	radio	定义单选框。

属性	描述
value	定义input的初始值
required	输入内容是必须的，不能为空。
readonly	定义input为只读模式。
disabled	禁用input元素。
placeholder	定义文本输入框的提示音。
name	定义文本输入框的名字，唯一。
maxlength	最多可以输入多少字符。
size	定义文本框的宽度。

3 . label 标签

label ：给input添加的标注。

for：为了让input和label进行绑定。

for的值要跟input的值相同，当点击label时，可以让input自动获得输入焦点。

4 . 多行文本输入框

属性	属性值	描述
textarea	name	规定文本区的名称。
	cols	规定文本区内的可见宽度。
	rows	规定文本区内的可见行度。
	required	输入内容是必须的，不能为空。
	readonly	定义input为只读模式。
	disabled	禁用input元素。
	maxlength	最多可以输入多少字符。