前端学习笔记75-表单简介

最新推荐文章于 2024-10-03 16:36:49 发布
最新推荐文章于 2024-10-03 16:36:49 发布
阅读量352 收藏 1
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45034895/article/details/116543551
版权

前端学习笔记75-表单简介

当我们办银行卡时，需要填单子(个人信息)，这个叫做表单。（视频举的例子）
表单用于提交数据，在网页中也可以使用表单，其将本地数据提交给远程的服务器。

form标签

这里我们用form创建表单
第一个属性是action，它用于指定表单提交的服务器地址。由于我们现在学习，没有服务器，所以我们先创建一个target.html文件做服务器演示。
target.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>您的数据已经收到！</h1>
</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>Document</title>


</head>

<body>

    <form action="target.html">
        <input type="text">
    </form>
</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>Document</title>


</head>

<body>

    <form action="target.html">
        <!-- 文本框 -->
        <input type="text">
        <!-- 提交按钮 -->
        <input type="submit">
    </form>
</body>

</html>

在这里插入图片描述
这里我随便输入了三个是，点击提交。
在这里插入图片描述
这句话是我在target里写的，说明代码提交没啥问题。

value属性

如果想改变按钮显示的文字(即“提交”)，可以用value。

    <form action="target.html">
        <!-- 文本框 -->
        <input type="text">
        <!-- 提交按钮 -->
        <input type="submit"  value="注册">
    </form>

在这里插入图片描述

换行

想让按钮放在文本框下面，即换行，可以用br。

    <form action="target.html">
        <!-- 文本框 -->
        <input type="text">
        <br>
        <!-- 提交按钮 -->
        <input type="submit"  value="注册">
    </form>

在这里插入图片描述

name属性

前面实际上数据没有提交给服务器，因为没有写name属性。
怎么知道的呢？
前面的那种写法，跳转后，地址栏是这个。
在这里插入图片描述

如果我加上name，即如下代码

    <form action="target.html">
        <!-- 文本框 -->
        <input type="text" name="hello">
        <br>
        <!-- 提交按钮 -->
        <input type="submit"  value="注册">
    </form>

提交后地址栏是下面这个。
在这里插入图片描述
这个才算是数据提交。

密码框


    <form action="target.html">
        <!-- 文本框 -->
        <input type="text" name="hello">
        <br>
        <!-- 密码框 -->
        <input type="password" name="password">
        <!-- 提交按钮 -->
        <input type="submit"  value="注册">
    </form>

在这里插入图片描述
这里可以看到，密码框的特点就是它是用星号显示的。

单选按钮

单选按钮用于二选一。
两个选项要实现单选功能，则必须设置相同的name属性值。


    <form action="target.html">
        <!-- 文本框 -->
        <input type="text" name="hello">
        <br>
        <!-- 密码框 -->
        <input type="password" name="password">
        <!-- 提交按钮 -->
        <br>
        <input type="submit"  value="注册">
        <!-- 单选按钮 -->
        <br>
        <input type="radio" name="single">
        <input type="radio" name="single">
    </form>

在这里插入图片描述
测试了下，两个圆形按钮不能同时选中，所以实现了单选。

此外，单选按钮这种实际上得设置value属性。因为它不需要用户填，只需要选中，如果没设置value，则不管我选中哪一个，提交后，地址都会和下图一样。
在这里插入图片描述
如果我设置value，

        <input type="radio" name="single" value="1">
        <input type="radio" name="single" value="2">

选中第一个按钮
在这里插入图片描述
选中第二个按钮
在这里插入图片描述

checked

给单选按钮设置checked，则将对应按钮设置为默认选中。
这个属性可以不用写属性值只写属性名。

         <!--也可以checked="checked"-->
        <input type="radio" name="single" value="1" checked>
        <input type="radio" name="single" value="2">

刷新页面，可以看到，默认选择第一个单选按钮。
在这里插入图片描述

多选按钮

多选框的功能为可以同时选中多个。
和单选一样，得设置相同的name属性，和设置不同的value属性。
也可以设置checked。

        <!-- 多选框 -->
        多选
        <input type="checkbox" name="t" value="1">
        <input type="checkbox" name="t" value="2">
        <input type="checkbox" name="t" value="3">

在这里插入图片描述

下拉列表

前面的都是用input标签写得，然后修改type属性。而下拉列表则不是，它是用select标签。

        <!-- 下拉列表 -->
        <select name="aa" id="">
            <option value="i">1</option>
            <option value="i">2</option>
            <option value="i">3</option>
        </select>

在这里插入图片描述
它的默认限制设置不是用checked，而是用selected。

        <!-- 下拉列表 -->
        <select name="aa" id="">
            <option  value="i">1</option>
            <option selected value="i">2</option>
            <option value="i">3</option>
        </select>

在这里插入图片描述

这节知识点挺多的，不过没啥难度。
全部代码如下。

<!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 action="target.html">
        <!-- 文本框 -->
        <input type="text" name="hello">
        <br>
        <!-- 密码框 -->
        <input type="password" name="password">
        <!-- 提交按钮 -->
        <br>
        <input type="submit"  value="注册">
        <!-- 单选按钮 -->
        <br>                
         <!--也可以checked="checked"-->
        <input type="radio" name="single" value="1" checked>
        <input type="radio" name="single" value="2">
        <br>
        <br>
        <!-- 多选框 -->
        多选
        <input type="checkbox" name="t" value="1">
        <input type="checkbox" name="t" value="2">
        <input type="checkbox" name="t" value="3">
        <br>
        <!-- 下拉列表 -->
        <select name="aa" id="">
            <option  value="i">1</option>
            <option selected value="i">2</option>
            <option value="i">3</option>
        </select>
    </form>
</body>

</html>

在这里插入图片描述

小欣CZX
关注
专栏目录
大前端学习笔记--持续随缘更新
JackieDYH的博客
02-10 1212
目录 0210--前端知识&HTML常用标签 0210--前端知识&HTML常用标签 1、浏览器及内核介绍： chrome谷歌： 特点——简洁、快速、安全 内核——webkit,Blink 费用——收费 Firefox火狐——Mozilla公司： 特点——非盈利、Gecko项目开源 内核——Gecko Safari苹果——苹果...
【前端学习笔记—表单】
LPC的博客
03-29 850
目录前言一、什么是表单二、表单用法三、表单元素1. 表单元素格式2.表单元素类型（1）text文本框（2）password密码框（3）radio单选框（4）checkbox复选框（5）button按钮（6）file文件（7）hidden隐藏（8）select下拉选择框（9）textarea多行文本域 前言 本文就前端知识中部分表单基础知识点进行总结，希望对你有用！ 一、什么是表单 在html中表单是一个包含表单元素的区域。 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。.
前端学习_表单小结
qq_44467405的博客
02-21 196
HTML表单 学习目标 能够说出表单组成部分 掌握HTML常用表单元素 掌握HTML常用表单属性 概述 表单的作用：用于搜集不同类型的用户输入 表单的组成：表单元素（控件）、表单区域 生活中的表单： 网页中的表单： 表单元素 表单元素是允许用户在表单中输入内容的标签， 比如：文本域、下拉列表、单选框、复选框等。 表单元素标签 input标签 概述： 标签是最重要的表单元素。 type属性取值不同，可以展示出不同的表单形式 作用：用来定义不同种类的输入控件 语法： 常用类型9种 t
web前端表格表单的学习笔记
m0_53303138的博客
06-02 286
表格 1.常用标签 <tr>定义表格的行 <th>定义表格的表头 <td>定义表格的列 <colspan>多列合并成一列 <rowspan>多行合并成一行 <caption>定义表格的标题 <thead>定义表格的页眉 <tfoot>定义表格的页脚 表格属性 <table border="1" bgcolor="red">表格背景颜色 background="/i/eg_...
【前端开发总结】表单操作系列
发现问题，面对问题，分析问题，解决问题，总结问题
09-11 1860
文章目录（一）常用操作整理（1）Select标签操作1. 基础操作2. 添加/删除Select的Option项（2）多选框checkbox1. 常用操作（3）文本框text1. 常用操作（4）表达控件属性操作（5）隐藏input的三种方法和区别（6）Jquery获取form表单中的数据（二）动态组件和标签（1）动态调整标签组件位置样式1. jQuery语法——移动节点，改变节点顺序2. 【案例】移动节点（三）实践整理（1）多表单合并提交 （一）常用操作整理 （1）Select标签操作 1. 基础操作 $(
html基础—表单
s1doer的博客
03-15 471
form 表单元素 语法： <from>表单控件</from> 属性： action： 指定数据提交的目的地址 method ：数据请求方式 get /post 文本框与密码框 < input type = "text">：文本框 < input type = "password">：密码框 属性： name：定义当前控件的名称 value：要提交给服务器的值，也是默认显示在控件上的值 maxlength：用来限制用户输入的最大字符数 placehold
【2024】前端学习笔记5-表单标签使用
皮皮的博客
09-13 1397
本文记录了表单form的基本使用，包含input常见类型text、password、radio、checkbox、submit、reset使用；select与option组合的下拉菜单功能；textarea标签的多行文本输入框使用
前端学习笔记--注册表单
xiaomiguoba7的博客
05-18 377
表单在网页中主要负责数据采集功能html中使用form标签完成。表单标签其实是一组标签的组合，不是一个标签。表单元素是允许用户在表单中（比如：输入框、文本域、下拉列表、单选框、复选框等等）输入信息的元素。 在html中使用来定义表单： 注册表单就是通过input的各种属性实现用户输入 以下是代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
前端学习笔记-黑马程序员Vue
01-09
前端学习笔记-黑马程序员Vue Vue.js 是一款流行的前端框架，它提供了强大的模板语法、数据绑定、MVVM 模型等特点，帮助开发者快速构建复杂的前端应用程序。下面是对 Vue.js 的一些重要知识点的总结： Vue.js ...
【2024】前端学习笔记12-JavaScript初体验-Js操作window
最新发布
皮皮的博客
10-03 1663
本文记录了js初体验及window方面的内容包括open、close、reload、document、alert、confirm、innerWidth、innerHeight等内容
DW中的建单选按钮不能实现二选一该怎么办?
09-24
DW中的建单选按钮不能实现二选一该怎么办？使用dw创建了单选框，但是发现没办法二选一，该怎么办呢？最大的可能就是属性出了问题，下面我们就来看看详细的教程，需要的朋友可以参考下
表单form action的url写法
幻听
09-23 9293
转载▼ 在写web页面时，标签 是很常见的元素，它的一个属性是action，用来标识将表单交给谁去处理。很显然，这里有一个地址的问题，而且是在服务器这边的地址。比如服务器内的一个servlet。 那么这个地址怎么写？ 1.以"/"开头的表示绝对地址，即web根目录，比如你用tomcat服务器，那么就是指webapp目录了。 2.不以"/"开头的表
细说 Form (表单)
zhjIvy的专栏
11-13 615
最近学习JSP，但是对于表单的使用一直存有疑惑，因此在网上找一些文章。       本文只给出链接：      http://www.cnblogs.com/fish-li/archive/2011/07/17/2108884.html#_labelStart      总结： 表单标记 　　该标记的主要作用是设定表单的起止位置，并指定处理表单数据程序的url地址。其基本语法结构如下
012---表单、下拉菜单和表单域
sunshine_0880的博客
04-05 2012
一、表单基本语法形式完整的表单由表单域、提示文本、表单控件组成。1.输入框控件：input&lt;input/&gt;是一个单标签，效果如下（左图鼠标没有放进去，右图鼠标点击后）：input控件的属性：注意：①对于单选按钮，如果一组有两个，那么给这两个控件设置同一个name值，那么就可以二选一。如：性别： &lt;input type="radio" name="sex" /&gt;女 &lt...
【form表单】的两个重要属性
JV_YAN的博客
04-23 2404
【form表单】     1、两个重要属性：action-表单提交的服务器地址  method-表单提交数据的方法（get/post）     2、get和post的区别：         get：使用URL传参： http://服务器地址?name1=value1&name2=value2                                 (?表示传递参数，?后面采用nam
Form表单提交时动态的改变目标地址
积
06-11 4183
动态修改form的url: 方法一： 设置button的onClick(推荐) function doSubmit(){ document.totalForm.action = 'path/path/total.action'; document.totalForm.submit(); } 方法二:直接修改本页面的地址 function doFindOrder(){ window.location...
Element-UI表单验证 二选一、三选一、多选一验证
Williamqin_的博客
06-27 393
在表单提交过程中很多时候要用到几个表单项二选一验证或多选一验证，比如联系方式中的手机号和固定电话只需要填写一项就可通过验证，针对这样情况可以使用Element-UI的自定义验证实现，具体实现方法如下。
表单提交的数据，以其name属性为准
大宇的博客，欢迎访问
06-28 4667
        在提交表单数据的过程中，我发现提交的表单内容数据，以其name属性为基准。当然了，我习惯把name与id属性统一起来，这样就能姑且认为是通过name属性提交的数据。实际结果也是以name属性为基准的。        比如，我在下面的这个表单中提交数据。                        请假类型的代码可以说明一切，id是leaveType2，name属性的值是leave...
Django——form表单
weixin_43808690的博客
01-11 739
制作一个Django的form表单项目——一个登陆注册的项目； 制作过程：建模（form.py+model建模）—&amp;amp;gt;views表单建立（两个函数：StudentExample + ajaxPostData）
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小欣CZX

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值