格子学前端
格子学前端

HTML常用标签之表单标签

HTML常用标签之表单标签

  • 前言
  • 一、表单域
  • 二、表单元素
    • 1.input 输入表单元素
    • 2.select 下拉表单元素
    • 3.textarea 表单元素

前言

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

一、表单域

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

二、表单元素

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

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

1.input 输入表单元素

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

标签的属性~
HTML常用标签之表单标签_第1张图片
几个重要属性的作用~

  1. 文本框（text） 
    <form action="#">
        <input type="text">
    form>
  1. 密码框（password） 
    <form action="#">
        <input type="password">
    form>
  1. 单选按钮（radio） 
    <form action="#">
        性别：男<input type="radio">女<input type="radio">
    form>
  1. 复选框（checkbox） 
    <form action="#">
        爱好：吃饭<input type="checkbox">睡觉<input type="checkbox">
    form>
  1. 提交按钮（submit） 
    <form action="#">
        <input type="submit" value="提交">
    form>
  1. 重置按钮（reset） 
    <form action="#">
        <input type="reset" value="重新填写">
    form>
  1. 普通按钮（button）
    <form action="#">
        <input type="button" value="确认">
    form>
  1. 文件域 （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>Documenttitle>
head>

<body>
    <form>
        
        用户名：<input type="text" value="请输入用户名"><br>
        
        密码：<input type="password"><br>
        
        
        
        性别：男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
        
        爱好：吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 打豆豆<input type="checkbox"><br>
        
        <input type="submit" value="免费注册">
        
        <input type="reset" value="重新填写">
        
        <input type="button" value="获取短信验证码"><br>
        
        上传头像：<input type="file">
    form>
body>
html>

预览图~
HTML常用标签之表单标签_第2张图片

2.select 下拉表单元素

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

注意点：