HTML常用标签之表单标签

格子学前端

已于 2022-01-21 21:45:14 修改

阅读量3.2k

点赞数 41

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

于 2022-01-21 21:42:18 首次发布

本文链接：https://blog.csdn.net/m0_61794291/article/details/122629109

版权

前端同时被 2 个专栏收录

43 篇文章 5 订阅

订阅专栏

html

31 篇文章 1 订阅

订阅专栏

HTML常用标签之表单标签

前言
一、表单域
二、表单元素

前言

在网页中，我们需要跟用户进行交互，收集用户资料，此时就需要用到表单标签
在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息三个部分构成

一、表单域

表单域是一个包含表单元素的区域
在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递
<form>会把它范围内的表单元素信息提交给服务器

二、表单元素

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件

表单元素可分为三类，即：input输入表单元素、select下拉表单元素、textarea文本域元素

1.input 输入表单元素

<input>标签是一个单标签，用于收集用户信息

<input>标签的属性~
在这里插入图片描述
几个重要属性的作用~

文本框（text） <input type="text">

    <form action="#">
        <input type="text">
    </form>

密码框（password） <input type="password">

    <form action="#">
        <input type="password">
    </form>

单选按钮（radio） <input type="radio">

    <form action="#">
        性别：男<input type="radio">女<input type="radio">
    </form>

复选框（checkbox） <input type="checkbox">

    <form action="#">
        爱好：吃饭<input type="checkbox">睡觉<input type="checkbox">
    </form>

提交按钮（submit） <input type="submit">

    <form action="#">
        <input type="submit" value="提交">
    </form>

重置按钮（reset） <input type="reset">

    <form action="#">
        <input type="reset" value="重新填写">
    </form>

普通按钮（button）<input type="button">

    <form action="#">
        <input type="button" value="确认">
    </form>

文件域（file） <input type="file">

    <form action="#">
        上传头像：<input type="file">
    </form>

综合应用~

<!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>Document</title>
</head>

<body>
    <form>
        <!-- text 文本框 -->
        用户名：<input type="text" value="请输入用户名"><br>
        <!-- password 密码框 -->
        密码：<input type="password"><br>
        <!-- radio 单选按钮 -->
        <!-- name 是表单元素名字 这里性别单选按钮必须有相同的name值 -->
        <!-- 单选按钮和复选框可以设置checked属性，页面打开时会默认选中 -->
        性别：男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
        <!-- checkbox 复选框 -->
        爱好：吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 打豆豆<input type="checkbox"><br>
        <!-- submit按钮可以把表单域form内的表单元素里面的值提交给后台服务器 -->
        <input type="submit" value="免费注册">
        <!-- 重置按钮可以还原表单元素的初始状态 -->
        <input type="reset" value="重新填写">
        <!-- 普通按钮 button 结合js使用-->
        <input type="button" value="获取短信验证码"><br>
        <!-- 文件域 file 用于上传文件 -->
        上传头像：<input type="file">
    </form>
</body>
</html>

预览图~
在这里插入图片描述

2.select 下拉表单元素

使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表

注意点：

<select>中至少包含一对<option>
在<option>中定义selected=“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>Document</title>
</head>
<body>
    <form>
        籍贯：
        <select>
            <option>山东</option>
            <option>北京</option>
            <option>天津</option>
            <option selected="selected">火星</option>
        </select>
    </form>
</body>
</html>

预览图~
在这里插入图片描述

3.textarea 表单元素

当用户输入内容较多的情况下，我们可以用表单元素标签替代文本框标签，在表单元素中，<textarea>标签是用于定义多行文本输入的控件

代码实现~

<!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>Document</title>
</head>
<body>
    <form>
        今日反馈：
        <textarea>请在此输入内容</textarea>
    </form>
</body>
</html>

预览图~
在这里插入图片描述

格子学前端

关注

41
点赞
踩
111

收藏

觉得还不错? 一键收藏
20
评论
HTML常用标签之表单标签

HTML常用标签之表单标签前言一、表单域二、表单元素1.input 输入表单元素2.select 下拉表单元素3.textarea 表单元素前言在网页中，我们需要跟用户进行交互，手机用户资料，此时就需要用到表单标签在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息三个部分构成一、表单域表单域是一个包含表单元素的区域在HTML标签中，<form>标签用于定于表单域，以实现用户信息的收集和传递<form>会把它范围内的表单元素信息提交给服务..
复制链接

扫一扫