HTML/CSS学习笔记02【表单标签】

谁践踏了优雅 2022-10-29 00:46 350阅读 0赞

w3cschool菜鸟教程.CHM（腾讯微云）：https://share.weiyun.com/c1FaX6ZD

HTML/CSS学习笔记01【概念介绍、基本标签、表单标签】【day01】
HTML/CSS学习笔记02【表单标签】【day02】
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】【day02】

目录

第3节表单标签

今日内容

HTML标签_表单标签_概述

HTML标签_表单标签_表单项input1

radio

checkbox

label

HTML标签_表单标签_表单项input2

隐藏域

取色器

HTML标签_表单标签_表单项select

表单代码汇总

HTML标签_案例1_注册页面

第3节表单标签

今日内容

HTML标签：表单标签
CSS

HTML标签_表单标签_概述

* 表单：
* 概念：用于采集用户输入的数据的（用于和服务器进行交互）。
* form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围。
* 属性：
* action：指定提交数据的URL
* method：指定提交方式
* 分类：一共7种，2种比较常用
* get：

                    1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。  
                    2. 请求参数大小是有限制的。  
                    3. 不太安全。  
               \* post：  
                    2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)。  
                    2. 请求参数的大小没有限制。  
                    3. 较为安全。
    \* 表单项中的数据要想被提交：必须指定其name属性。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 1

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 2

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0OTEzNQ_size_16_color_FFFFFF_t_70 3

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单标签</title>
    </head>
    <body>
        <form action="#" method="post">
            用户名：<input type="text" name="username"><br>
            密码：<input name="password"><br>
            <input type="submit" value="登录">
        </form>
    </body>
</html>

HTML标签_表单标签_表单项input1

radio

checkbox

label

HTML标签_表单标签_表单项input2

* 表单项标签：
* input：可以通过type属性值，改变元素展示的样式
* type属性：
* text：文本输入框，默认值
* placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
* password：密码输入框
* radio:单选框
* 注意：

                    1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。  
                    2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值  
                    3. checked属性，可以指定默认值  
            \* checkbox：复选框  
                \* 注意：  
                    1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值。  
                    2. checked属性，可以指定默认值。
            \* file：文件选择框  
            \* hidden：隐藏域，用于提交一些信息。  
            \* 按钮：  
                \* submit：提交按钮，可以提交表单  
                \* button：普通按钮  
                \* image：图片提交按钮  
                    \* src属性指定图片的路径    
       \* label：指定输入项的文字描述信息  
           \* 注意：  
               \* label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。

隐藏域

取色器

HTML标签_表单标签_表单项select

* select: 下拉列表
* 子元素：option，指定列表项

* textarea：文本域
* cols：指定列数，每一行有多少个字符
* rows：默认多少行。

表单代码汇总

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单标签</title>
    </head>
    <body>
        <form action="#" method="get">
            <label for="username"> 用户名 </label>：<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
            密码：<input type="password" name="password" placeholder="请输入密码"><br>
            性别：<input type="radio" name="gender" value="male"> 男
            <input type="radio" name="gender" value="female" checked> 女
            <br>
            爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街
            <input type="checkbox" name="hobby" value="java" checked> Java
            <input type="checkbox" name="hobby" value="game"> 游戏<br>
            图片：<input type="file" name="file"><br>
            隐藏域：<input type="hidden" name="id" value="aaa"> <br>
            取色器：<input type="color" name="color"><br>
            生日：<input type="date" name="birthday"> <br>
            生日：<input type="datetime-local" name="birthday"> <br>
            邮箱：<input type="email" name="email"> <br>
            年龄：<input type="number" name="age"> <br>
            省份：<select name="province">
                <option value="">--请选择--</option>
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3" selected>陕西</option>
            </select><br>
            自我描述：
            <textarea cols="20" rows="5" name="des"></textarea>
            <br>
            <input type="submit" value="登录">
            <input type="button" value="一个按钮"><br>
            <input type="image" src="img/regbtn.jpg">
        </form>
    </body>
</html>

HTML标签_案例1_注册页面

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
    </head>
    <body>
        <!--定义表单 form-->
        <form action="#" method="post">
            <table border="1" align="center" width="500">
                <tr>
                    <td><label for="username">用户名</label></td>
                    <td><input type="text" name="username" id="username"></td>
                </tr>
                <tr>
                    <td><label for="password">密码</label></td>
                    <td><input type="password" name="password" id="password"></td>
                </tr>
                <tr>
                    <td><label for="email">Email</label></td>
                    <td><input type="email" name="email" id="email"></td>
                </tr>
                <tr>
                    <td><label for="name">姓名</label></td>
                    <td><input type="text" name="name" id="name"></td>
                </tr>
                <tr>
                    <td><label for="tel">手机号</label></td>
                    <td><input type="text" name="tel" id="tel"></td>
                </tr>
                <tr>
                    <td><label>性别</label></td>
                    <td><input type="radio" name="gender" value="male"> 男
                        <input type="radio" name="gender" value="female"> 女
                    </td>
                </tr>
                <tr>
                    <td><label for="birthday">出生日期</label></td>
                    <td><input type="date" name="birthday" id="birthday"></td>
                </tr>
                <tr>
                    <td><label for="checkcode">验证码</label></td>
                    <td><input type="text" name="checkcode" id="checkcode">
                        <img src="img/verify_code.jpg">
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center"><input type="submit" value="注册"></td>
                </tr>
            </table>
        </form>
    </body>
</html>

加油~~~

发表评论取消回复

表情：

评论列表（有 0 条评论，350人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTMLCSS学习笔记（二十三）GRID布局

GRID布局它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局 Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的

拼搏现实的明天。/ 2023年10月06日 15:28/ 0 赞/ 152 阅读

相关 HTMLCSS学习笔记（二十四）浏览器兼容

浏览器兼容浏览器 ![18d351598399497bb326248e9b1219fe.png][] 浏览器大战 ![32ff149e3df74d5e8868

ゝ一纸荒年。/ 2023年10月06日 15:28/ 0 赞/ 170 阅读

相关 HTML笔记：表单input标签

> 摘要：微信搜索【[三桥君][Link 1]】 > 说明：这是关于HTML5的代码笔记一、理论知识表单标签 from：表单的最外层容器 input：标

短命女/ 2023年03月04日 10:30/ 0 赞/ 226 阅读

相关 HTML标签之表单标签

1 ：表单标签: `<form></form>` 表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素

Bertha 。/ 2022年12月26日 11:23/ 0 赞/ 323 阅读

相关 HTML5——CSS学习笔记（2）HTML表单标签

表单 1 ：表单标签 > <form></form> > 属性： > action = '接口地址' > method = 'get / post'

逃离我推掉我的手/ 2022年12月11日 01:23/ 0 赞/ 312 阅读

相关 HTML/CSS学习笔记02【表单标签】

> w3cschool菜鸟教程.CHM（腾讯微云）：[https://share.weiyun.com/c1FaX6ZD][https_share.weiyun.com_

谁践踏了优雅/ 2022年10月29日 00:46/ 0 赞/ 351 阅读

相关 springMVC表单标签

WHY 使用 form 标签？通过SpringMVC的表单标签可以实现将模型数据中的属性和HTML表单元素相绑定，以实现表单数据更便捷编辑和表单值的回显 form标签中的

Love The Way You Lie/ 2022年09月29日 05:23/ 0 赞/ 301 阅读

相关表格标签、表单标签

表格标签、表单标签文章目录表格标签、表单标签表格标签\`\` <table></ta

曾经终败给现在/ 2022年08月31日 11:04/ 0 赞/ 421 阅读

相关 HTML表单标签

1、 <form>标签提供给用户输入的表单标签， type表示控件类型，为可选，默认为text。 name表示提交的参数名， value表示显示

野性酷女/ 2022年05月31日 11:40/ 0 赞/ 368 阅读

相关 SpringMVC表单标签和表单标签简介

SpringMVC<from:form>表单标签和<input>表单标签简介在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标签，这些标

柔情只为你懂/ 2022年03月20日 01:16/ 0 赞/ 488 阅读