HTML学习笔记7：表单

最新推荐文章于 2023-07-23 00:42:33 发布

原创最新推荐文章于 2023-07-23 00:42:33 发布 · 197 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript

Web 同时被 2 个专栏收录

37 篇文章

订阅专栏

HTML

8 篇文章

订阅专栏

form标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form标签</title>
</head>
<body>
<!--name	表单名称 用于区分不同表单-->
<!--method	提交方式 指定HTTP请求方法(get/post)-->
<!--action	提交地址 指定表单数据的提交地址-->
<!--target	打开方式 指定窗口打开方式，一般只用_blank-->
<!--enctype	编码方式 除非上传文件，一般不设置-->
<form name="myForm" method="post" action="index.php" target="_blank">
    <input type="text" value="这是一个文本框"/><br/>
    <textarea>这是一个多行文本框</textarea><br/>
    <select>
        <option>HTML</option>
        <option>CSS</option>
        <option>JavaScript</option>
    </select>
</form>
</body>
</html>

在这里插入图片描述

单行文本框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>单行文本框</title>
</head>
<body>
<!--input属性-->
<!--value       设置文本框的默认文本-->
<!--size        设置文本框的长度，一般不用，使用CSS来控制-->
<!--maxlength   设置文本框中最多可以输入的字符数-->
<form method="post">
    姓名：<input type="text" size="10" maxlength="5"/><br/>
    姓名：<input type="text" size="15" value="gavinandre"/>
</form>
</body>
</html>

在这里插入图片描述

密码文本框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>密码文本框</title>
</head>
<body>
<form>
    账号：<input type="text"/><br/>
    密码：<input type="password"/>
</form>
</body>
</html>

在这里插入图片描述

单选框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>单选框</title>
</head>
<body>
<!--radio   单选框-->
<!--name    单选框组名-->
<!--value   单选框取值-->
<!--checked	默认勾选-->
<form method="post">
    性别:
    <input type="radio" name="gender" value="男" checked/>男
    <input type="radio" name="gender" value="女"/>女
    <br/>
    年龄:
    <input type="radio" name="age" value="80后" checked/>80后
    <input type="radio" name="age" value="90后"/>90后
    <input type="radio" name="age" value="00后"/>00后
</form>
</body>
</html>

在这里插入图片描述

复选框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>复选框</title>
</head>
<body>
<!--checkbox  复选框-->
<!--name      单选框组名-->
<!--value     单选框取值-->
<!--checked	  默认勾选-->
<form method="post">
    水果:
    <input type="checkbox" name="fruit" value="苹果" checked/>苹果
    <input type="checkbox" name="fruit" value="香蕉" checked/>香蕉
    <input type="checkbox" name="fruit" value="西瓜"/>西瓜
    <input type="checkbox" name="fruit" value="李子"/>李子
</form>
</body>
</html>

在这里插入图片描述

按钮

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>按钮</title>
    <script>
        window.onload = function () {
            var btn = document.getElementById("button");
            btn.onclick = function () {
                alert("普通按钮");
            };
        };
    </script>
</head>
<body>
<!--button  普通按钮 一般配合JavaScript执行操作-->
<!--submit  提交按钮 一般提交数据到后台-->
<!--reset   重置按钮 一般清除表单内容-->
<form method="post">
    账号:<input type="text"/><br/>
    密码:<input type="password"/><br/>
    <input id="button" type="button" value="确定"/>
    <input type="submit" value="提交"/>
    <input type="reset" value="重置"/>
</form>
</body>
</html>

在这里插入图片描述

文件上传

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
</head>
<body>
<!--file 文件上传按钮-->
<form method="post">
    <input type="file"/>
</form>
</body>
</html>

在这里插入图片描述

多行文本框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>多行文本框</title>
</head>
<body>
<!--textarea标签  多行文本框-->
<!--rows         行数-->
<!--cols         列数-->
<form method="post">
    个人简介: <br/>
    <textarea rows="5" cols="20">介绍一下自己</textarea>
</form>
</body>
</html>

在这里插入图片描述

下拉列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>下拉列表</title>
</head>
<body>
<form method="post">
    <!--select标签  下拉列表-->
    <!--multiple	设置下拉列表可以选择多项-->
    <!--size	    设置下拉列表显示几个列表项，取值为整数-->
    <select>
        <!--option标签  下拉选项-->
        <!--selected	是否选中-->
        <!--value	    选项值 配合后台与JavaScript进行操作-->
        <option value="HTML">HTML</option>
        <option value="CSS">CSS</option>
        <option value="JavaScript" selected>JavaScript</option>
        <option value="jQuery">jQuery</option>
        <option value="Vue.js">Vue.js</option>
        <option value="HTML5">HTML5</option>
        <option value="CSS3">CSS3</option>
    </select>
</form>
</body>
</html>

在这里插入图片描述

练习

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Practice</title>
</head>
<body>
<form>
    昵称：<input type="text" size="15"/><br/>
    密码：<input type="password" size="15"/><br/>
    邮箱：<input type="text" size="15"/>
    <select>
        <option>qq.com</option>
        <option>sina.com</option>
        <option>163.com</option>
    </select>
    <br/>
    性别：
    <input type="radio" name="gender" value="男" checked/>男
    <input type="radio" name="gender" value="女"/>女
    <br/>
    爱好：
    <input type="checkbox" name="interest" value="旅游"/>旅游
    <input type="checkbox" name="interest" value="摄影"/>摄影
    <input type="checkbox" name="interest" value="运动"/>运动
    <br/>
    个人简介：<br/>
    <textarea rows="10" cols="30"></textarea>
    <br/>
    上传个人照片：<br/>
    <input type="file"/>
    <hr/>
    <input type="submit" value="立即注册"/>
</form>
</body>
</html>

在这里插入图片描述