从零开始学前端：表单制作 --- 今天你学习了吗？（CSS：Day05）

Coisini_甜柚か

已于 2022-04-19 17:10:50 修改

阅读量730

点赞数 1

分类专栏：从零开始学前端文章标签：前端 html css3

于 2022-01-06 08:56:41 首次发布

本文为Coisini博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_45266979/article/details/122336025

版权

从零开始学前端专栏收录该内容

48 篇文章 10 订阅

订阅专栏

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）

复习：从零开始学前端：表格制作 — 今天你学习了吗？（CSS：Day04）

文章目录

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）

前言

这04/05两节课是我自己错过了上课时间，看录播复习的，可能太程序化了，没有记录老师上课时出现的好玩的小梗~ 学习学习~

第五节课：讲述了表单的基本标签和如何制作表单

一、表单标签

为什么需要使用表单标签：

1. 使用表单目的是为了收集用户信息。
2. 在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

表单的组成：

表单域：包含表单元素的区域。
表单控件(表单元素)：输入框
提示信息：提示用户的信息

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

 <form action="url地址" method="提交方式(get/post)" name="表单域名称">
	各种表单元素控件
</form>

action="url地址” method=“提交方式” name="表单域名称"对于学习基础来说，我们暂时不用表单域提交数据,只需要写上form标签就可以了。

需要记住：

在我们写表单元素之前应该有个表单域把他们进行包含。
表单域使用的是form标签。

二、表单控件

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

input输入表单元素
select下拉表单元素
textarea文本域元素
表单中date属性

在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式(可以是文本字段、
复选框、掩码后的文本控件、单选按钮、按钮等)。

属性值	描述
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符
password	定义密码字段。该字段中的字符被掩码
radio	定义单选按钮
checkbox	定义复选框
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
button	定义可点击按钮(多数情况下，用于通过JavaScript启动脚本
file	定义输入字段和“浏览器按钮”用于上传文件
number	定义输入框必须输入数字
email	定义输入框必须是邮箱地址(@)

除 type属性外，标签还有其他很多属性，其常用属性如下:

属性	属性值	描述
name	由用户自定义	定义input元素的名称。(前端作为了解)
value	由用户自定义	用于设定输入框默认值
checked	checked	规定此input元素首次加载时应当被选中(针对复选框checkbox)
maxlength	正整数	规定输入字段中的字符的最大长度。
size	自然数	指定控件宽度
placeholder	程序员自定义	规定帮助用户填写输入提示字符信息
required(HTML5新增)	required	表示输入框中是必填字段

三、label标签

标签不是表单课件，但是经常与表单搭配使用。

为什么要使用label标签？

<label>标签用于绑定一个表单元素当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,主要是用来增加用户体验的。

使用语法：

<form>
<input type="radio" name="sex" id="sex1" value="" /><label for="sex1">男</label><br>
<input type="radio" name="sex" id="sex2" value="" /><label for="sex2">女</label>
</form>

主要就是id来绑定的
核心: < label>标签的for属性应当与相关元素的id属性相同。

四、select下拉框

通过<select>和<option>标记，可以设计页面中的下拉列表框，从而为用户提供一些选项和信息的列表。列表框中，可以看到多个选项：下拉列表框，只能看到一个选项。

使用语法：

<select name="" id="" >
     <option value="">选项1</option>
     <option value="">选项2</option>
</select>

注意：

<select>中至少包含一对< option>
在<option>中定义selected = " selected "时，当前项即为默认选中项。

五、textarea表单框

使用场景:

当用户输入文本内容较多的情况下，比如网站的提供意见输入框这个时候，我们就不能使用文本框表单了，此时我们可以使用< textarea>标签。在表单元素中，< textarea>标签是用于定义多行文本输入的控件。（特大的文本框）

使用语法：

<textarea name="" id="" cols="60" rows="5"></textarea>

通过< textarea>标签可以轻松地创建多行文本输入框。
cols=“每行中的字符数”，rows=“显示的行数”，我们在实际开发中不会使用，都是用CSS来改变大小

六、表单date属性值

普通的文本输入框也可以用来输入日期和时间，但提交后的数据需要进行二次处理才能使用HTML5，提供date pickers(日期选择器)类型的选择框，很大程度的简化了这一过程，用户可以直接选择日期，时间等选项。

输入类型	描述
type=”date”	选择日、月、年
type=”month”	选择月、年
type=”week”	选择周、年
type=”time”	选择时间(小时和分钟)
type=”datetime”	选择时间、日、月、年(UTC时间)世界协调时间
type=”datetime-local”	选择时间、日、月、年(本地时间)

七、表单相关的标签(了解)

<fieldset>标签元素可将表单内的相关元素分组。
<legend> 标签为 fieldset 元素定义标题。

八、练习

在这里插入图片描述

代码：

<!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>
    <style>
        fieldset {
            /* background-color: rgb(224, 191, 255); */
            width: 600px;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <fieldset>
        <legend>
            <h2>网购用户信息调查</h2>
        </legend>
        <form action="" method="" class="FormStyle" autocomplete="on">
            <label for="name">姓名：</label>
            <input type="text" placeholder="请输入您的姓名" id="name"><br>
            <label for="">性别：</label>
            <input type="radio" name="sex" id="man"><label for="man">男</label>
            <input type="radio" name="sex" id="woman"><label for="woman">女</label><br>
            <label for="date">出生日期：</label>
            <input type="date" name="" id="date"><br>
            <label for="number">手机号码：</label>
            <input type="number" name="" id="number" placeholder="请输入您的手机号"><br>
            <label for="email">邮箱：</label>
            <input type="email" name="" id="email" placeholder="请输入您的邮箱"><br>
            <label for="select">您经常访问的网站：</label>
            <br>
            <select name="" id="select">
                <option value="">CSDN</option>
                <option value="">博客园</option>
                <option value="">知乎</option>
                <option value="">掘金</option>
            </select><br>
            您经常在网上购买哪一类商品：
            <br>
            <input type="checkbox" name="" id="clothing" checked><label for="clothing">服装</label>
            <input type="checkbox" name="" id="books"><label for="books">书籍</label>
            <input type="checkbox" name="" id="digital"><label for="digital">数码</label>
            <input type="checkbox" name="" id="appliance"><label for="appliance">家电</label>
            <input type="checkbox" name="" id="food"><label for="food">食品</label>
            <input type="checkbox" name="" id="shoes" checked><label for="shoes">鞋帽</label>
            <br>
            <label for="您对各种购物网站的评价：">您对各种购物网站的评价：</label>
            <br>
            <textarea name="" id="textarea" cols="50" rows="8"></textarea><br>
            上传文件：<input type="file" name="" id=""><br>
            条款：
            <ul>
                <li>都是属于我自己的感受</li>
                <li>是我自己填写</li>
                <li>真实内容</li>
            </ul>
            <input type="checkbox" name="" id="agree"><label for="agree">我同意此条例</label>
            <br><br>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </form>
    </fieldset>
</body>

</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>
    <link rel="stylesheet" href="./表格-表单.css">
</head>

<body>
    <fieldset>
        <legend>
            <h2>网购用户信息调查</h2>
        </legend>
        <form action="" method="">
            <table>
                <tr>
                    <td>
                        <label for="name">姓名：</label>
                    </td>
                    <td>
                        <input type="tel" name="" id="name" placeholder="请输入您的姓名">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="">性别：</label>
                    </td>
                    <td>
                        <input type="radio" name="sex" id="man">
                        <label for="man">男</label>
                        <label>
                            <input type="radio" name="sex" id="woman">女
                        </label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="date">出生日期：</label>
                    </td>
                    <td>
                        <input type="date" name="" id="date">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="tel">手机号码：</label>
                    </td>
                    <td>
                        <input type="number" name="" id="tel" placeholder="请输入您的手机号">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="email">邮箱：</label>
                    </td>
                    <td>
                        <input type="email" name="" id="email" placeholder="请输入您的邮箱">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <label for="web">您经常访问的网站：</label>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <select name="" id="web">
                            <option value="num1">CSDN</option>
                            <option value="num2">淘宝</option>
                            <option value="num3">邮箱</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <label for="textarea">您经常在网上购买哪一类商品：</label>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <textarea name="" id="textarea" cols="30" rows="10"></textarea>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <label for="">上传文件：</label>
                        <input type="file" name="" id="">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <label for="">条款：</label>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <label for="">
                            <ul>
                                <li>第一条</li>
                                <li>第一条</li>
                                <li>第一条</li>
                            </ul>
                        </label>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="checkbox" name="" id="yes">
                        <label for="yes">我同意此条例</label>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="提交">
                        <input type="reset" value="重置">
                    </td>
                    <td></td>
                </tr>
            </table>
        </form>
    </fieldset>
</body>

</html>

预习：从零开始学前端：列表标签 — 今天你学习了吗？（CSS：Day06）

------志士惜日短。愁人知夜长。

Coisini_甜柚か

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
从零开始学前端：表单制作 --- 今天你学习了吗？（CSS：Day05）

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）复习：从零开始学前端：表格制作 — 今天你学习了吗？（CSS：Day04）文章目录从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）前言第五节课：讲述了表单的基本标签和如何制作表单一、表单标签二、表单控件三、label标签四、select下拉框五、textarea表单框六、表单date属性值七、表单相关的标签(了解)八、练习前言这04/05两节课是我自己错过了上课时间，看录播复习的，可能太程序化了，没有记录老
复制链接

扫一扫