HTML表单标签

guohilin

已于 2023-04-27 15:38:57 修改

阅读量966

点赞数 1

文章标签： html5

于 2023-04-27 15:35:42 首次发布

本文链接：https://blog.csdn.net/2302_76643111/article/details/130343064

版权

HTML表单

<from>元素

HTML表单用于搜集不类型的用户输入。用<from>元素HTML定义表单。

HTML 表单包含表单元素

表单元素是指不同类型的input元素、文本框、密码框、下拉列表框、单选按钮、提交按钮等等，一般由ingput、textarea、select标签构成，需要放到from标签内使用。

<input>标签

<input>元素是最重要的表单元素。

语法格式：

<input type="元素的类型" name="元素的名称" value="元素的值">

type属性

<input>元素有很多种形态，根据type的属性不同。

**type的属性**
类型	描述
text	文本框
password	密码框
checkbox	多选按钮
radio	单选按钮
reset	复位按钮
button	普通按钮
image	图像按钮（提交图片）
file	文本域（提交文件的按钮）
hidden	隐藏域
email	邮箱
color	颜色域
date	日期
time	时间
datetime-local	日期+时间
range	进度条

type的其他属性

type的其他属性
类型	描述
checked	默认选择
readonly	表示只读字段只可以读不可以修改
disabled	表示禁用（鼠标不可以点击）
autofocus	默认光标位置
required	不能为空白提交

示例：创建一个表单，设置html名称为注册页面，传送方式为 post，当用户提交表单时，提交至 demo.html 页面进行处理。

<!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>
</head>
<body>
    <form action="D:\云计算上课代码\2023.04.08\demo.html" method="post">
        <h3>用户注册</h3>
        <p>
            用户名称<input type="text" name="username" value="zhangsan">
        </p>
        <p>
            <input type="text" name="username" value="zhangsan" readonly>
        </p>    
        <p>
            用户密码<input type="password" name="Usepass" autofocus>
        </p>
        <p>
            用户性别<input type="radio" name="xb" value="男" checked>男<input type="radio" name="xb" value="女">女
        </p>
        <p>
            您的爱好
            <input type="checkbox" name="ah">足球
            <input type="checkbox" name="ah">篮球
            <input type="checkbox" name="ah">LOL
            <input type="checkbox" name="ah">韩剧
            <input type="checkbox" name="ah">王者荣耀
        </p>
        <p>
            邮箱<input type="email" value="请输入邮箱">
        </p>
        <p>
            用户头像<input type="file">
        </p>
        <input type="color">
        <input type="date">
        <input type="datetime-local">
        <input type="time">
        <input type="text">
        <input type="range">
        <input type="button" value="注册用户">
    </form>
</body>
</html>

效果展示：

注意：使用<radio>或<checkbox>时，要保证选择对象的名称相同（name）。

HTML表单属性

action属性

action指跳转路径，跳转路径可分为绝对路径和相对路径。

路径：

绝对路径：从盘符开始，找到你所需要的文件的路径路径+文件名称

例如：D:\云计算上课代码\2023.04.08\demo.html

相对路径：当前源文件和目标文件的相对位置

例如：..\2023.04.08\demo.html

method属性

method属性是用来明确提交表单数据时所使用到的HTTP方式。取值有get和post，其中默认取值为get。

注意：使用get请求时，表单值会在浏览器的地址栏中暴露！不能用get传送敏感数据。

<form action="D:\云计算上课代码\2023.04.08\demo.html" method="get">

显示结果：

使用post请求时，表单值不会在浏览器的地址栏中出现，较于get比较安全

    <form action="..\2023.04.08\demo.html" method="post">

显示结果：

name属性

name属性规定表单名称

target属性

target属性的取值：

值	表述
_blank	响应显示在新窗口或选项卡中。
_self	响应显示在当前窗口中。
_parent	响应显示在父框架中。
_top	响应显示在窗口的整个 body 中。
framename	响应显示在命名的 iframe 中。

默认值为_self，这意味着响应将在当前窗口中打开。

HTML表单元素

<input>元素

HTML表单中最重要的元素就是<input>元素。<input>元素根据type不同的属性取值可以有不同的形态。具体的type属性在前面已经提到过。

<select>元素

<select>元素指下拉列表框，一般会和option标签进行连用。

列表通常会把第一个选项作为默认选项，但可以通过selected属性进行选择默认选项。

使用multiple属性，将以列表的形式显示。

<!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>
</head>
<body>
    <form action="">
        请选择居住城市：
        <select name="" id="">
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="" selected>湖北</option>
    </select>
    </form>
</body>
</html>

效果展示：（使用了selected属性，让湖北变成了默认选项）

<!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>
</head>
<body>
    <form action="">
        请选择居住城市：
        <select name="" id="" multiple>
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">湖北</option>
    </select>
    </form>
</body>
</html>

效果展示：（使用了multiple属性，变成了以列表形式显示）

<textarea>元素

<textarea>元素用来实现文本域

cols属性：表示多少列，表示文本域的宽度。

rows属性：表示多少行。表示文本域的高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>注册页面</title>
</head>
<body>
    <form action="">
  
     自我介绍<textarea name="intro" id="" cols="25" rows="5">这家伙什么也没留下</textarea>
    <\form>
</html>

效果展示：（cols，rows属性可以设置文本域初始时的大小。在浏览器页面中，可以通过拖拽文本域右下角的两条小斜线进行调节大小。）

guohilin

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
HTML表单标签

表单元素是指不同类型的input元素、文本框、密码框、下拉列表框、单选按钮、提交按钮等等，一般由ingput、textarea、select标签构成，需要放到from标签内使用。元素根据type不同的属性取值可以有不同的形态。创建一个表单，设置html名称为注册页面，传送方式为 post，当用户提交表单时，提交至 demo.html 页面进行处理。使用或时，要保证选择对象的名称相同（name）。元素有很多种形态，根据type的属性不同。
复制链接

扫一扫