Form表单

最新推荐文章于 2024-05-04 15:43:14 发布
最新推荐文章于 2024-05-04 15:43:14 发布
阅读量507 收藏
点赞数 1
分类专栏： WEB前端 文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42588990/article/details/122058816
版权

Form表单

在这里插入图片描述
表单在 Web 网页中用来给用户填写信息，从而能采用户信息，使网页具有交互的功能。
在这里插入图片描述
所有的用户输入内容的地方都用表单来写，如登录注册、搜索框
在这里插入图片描述
表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件

<form action="url" method="get|post"
name="myform"></form>

属性说明

action服务器地址
name表单名称

method中Get和Post的区别
1 数据提交方式，get把提交的数据url可以看到，post看不到
2 get一般用于提交少量数据，post用来提交大量数据

表单元素
一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮

1 表单标签
2 表单域
3 表单按钮

<form>
    <input type="text">
    <input type="submit">
</form>

表单元素一

文本框
文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域

<form>
   First name: <input type="text"
name="firstname">
    <br>
   Last name: <input type="text"
name="lastname">
</form>

在这里插入图片描述
密码框
密码字段通过标签 <input type="password"> 来定义

<form>
   Password: <input type="password"
name="pwd">
</form>

在这里插入图片描述

温馨提示
密码字段字符不会明文显示，而是以星号或圆点替代

单选按钮
<input type="radio"> 标签定义了表单单选框选项

<form>
    <input type="radio" name="sex"
value="male">Male
    <br>
    <input type="radio" name="sex"
value="female">Female
</form>

在这里插入图片描述

表单元素二

复选框
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项

<form>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike
    <br>
    <input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

在这里插入图片描述
文件
定义文件选择字段和 “浏览…” 按钮，供文件上传

<form>
    <input type="file" name="img">
</form>

在这里插入图片描述
提交按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理

<form name="input" action="url" method="get">
   Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>

在这里插入图片描述
重置按钮
定义重置按钮（重置所有表单值为默认值）

<form name="input" action="url" method="get">
   Username: <input type="text" name="user">
    <input type="reset">
</form>

在这里插入图片描述

温馨提示
请谨慎使用重置按钮！对于用户来说，不慎点击了重置按钮是件很恼火的事情

按钮
没有任何功能的按钮

<form name="input" action="url" method="get">
    <input type="button" value="点我"/>
    <button>点我</button>
</form>

在这里插入图片描述
图像图片按钮
定义图像作为提交按钮

<form name="input" action="url" method="get">
    <input type="image" src="close.jpg" />
</form>

在这里插入图片描述

表单元素三

在这里插入图片描述
下拉列表
<select> 元素用来创建下拉列表。
<option> 标签定义下拉列表中的一个选项（一个条目）

<form name="input" action="url" method="get">
    <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
</form>

在这里插入图片描述
<optgroup> 标签经常用于把相关的选项组合在一起。
如果你有很多的选项组合, 你可以使 <optgroup> 标签能够很简单的将相关选项组合在一起。

<form name="input" action="url" method="get">
    <select>
        <optgroup label="Swedish Cars">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
        </optgroup>
        <optgroup label="German Cars">
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </optgroup>
    </select>
</form>

在这里插入图片描述
多行文本框
<textarea> 标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性

<form name="input" action="url" method="get">
    <textarea rows="10" cols="30">我是一个文本框</textarea>
</form>

在这里插入图片描述
label
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同

温馨提示
for 属性可把 label 绑定到另外一个元素。请把 for 属性的值设置为相关元素的 id 属性的值

在这里插入图片描述

HTML5新增type类型一

email
定义用于 e-mail 地址的字段（当提交表单时会自动对 email 字段的值进行验证）

<form>
   E-mail: <input type="email" name="usremail">
    <input type="submit">
</form>

在这里插入图片描述
url
定义用于输入 URL 的字段

<form>
    <input type="url" name="homepage">
    <input type="submit">
</form>

在这里插入图片描述
search
定义搜索字段（比如站内搜索或谷歌搜索等）

<form>
   Search Google: <input type="search" name="googlesearch">
    <input type="submit">
</form>

在这里插入图片描述
tel
定义用于输入电话号码的字段

<form>
   电话号码: <input type="tel" name="usrtel">
    <input type="submit">
</form>

color
从拾色器中选取颜色

<form>
   选择你喜欢的颜色: <input type="color" name="favcolor">
    <input type="submit">
</form>

在这里插入图片描述

HTML5新增type类型二

number
定义用于输入数字的字段（您可以设置可接受数字的限制）

<form>
   数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">
    <input type="submit">
</form>

在这里插入图片描述
range
定义用于精确值不重要的输入数字的控件（比如 slider 控件）。你也可以设置可接受数字的限制

<form>
    <input type="range" name="points" min="1" max="10">
    <input type="submit">
</form>

在这里插入图片描述

请使用下面的属性来规定限制：
max : 规定允许的最大值。
min : 规定允许的最小值。
step : 规定合法数字间隔。
value : 规定默认值。

date
定义 date 控件

<form>
   生日: <input type="date" name="bday">
    <input type="submit">
</form>

在这里插入图片描述
month
定义 month 和 year 控件（不带时区）

<form>
   生日 ( 月和年 ): <input type="month" name="bdaymonth">
    <input type="submit">
</form>

在这里插入图片描述
week
定义 week 和 year 控件（不带时区）

<form>
   选择周: <input type="week" name="week_year">
    <input type="submit">
</form>

在这里插入图片描述

HTML5新增属性

在这里插入图片描述
autofocus 属性
autofocus 属性规定在页面加载时，域自动地获得焦点。

温馨提示
autofocus 属性适用于所有 <input> 标签的类型

<form>
   User name: <input type="text" name="user_name"  autofocus />
    <input type="submit">
</form>

在这里插入图片描述
placeholder 属性
placeholder 属性提供一种提示（hint），描述输入域所期待的值

<form>
    <input type="search" name="user_search" placeholder="Search itbaizhan" />
    <input type="submit">
</form>

在这里插入图片描述
required 属性
required 属性规定必须在提交之前填写输入域（不能为空）

<form>
   Name: <input type="text" name="usr_name" required />
    <input type="submit">
</form>

在这里插入图片描述

表单实操一

在这里插入图片描述

<table border="1" cellspacing="0"
align="center" width="500" height="300">
    <tr align="center">
        <td colspan="4">教员搜索</td>
    </tr>
    <tr>
        <td>搜索类型</td>
        <td>
            <select>
                <option value="title">搜索教员信息</option>
                <option value="java">Java</option>
                <option value="web">Web</option>
                <option value="python">Python</option>
            </select>
        </td>
        <td>教员身份</td>
        <td>
            <select>
                <option value="title">不限</option>
                <option value="g">高级讲师</option>
                <option value="z">中级讲师</option>
                <option value="c">初级讲师</option>
            </select>
        </td>
          </tr>
    <tr>
        <td>所在地区</td>
        <td>
            <select>
                <option value="title">不限</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="xian">西安</option>
                <option value="taiyuan">太原</option>
            </select>
        </td>
        <td>性别</td>
        <td>
            <form>
                <input type="radio" name="sex" value="nan">男
                <br>
                <input type="radio" name="sex" value="nv">女
            </form>
        </td>
    </tr>
    <tr>
        <td>学习科目</td>
        <td colspan="3">
            <select>
            <option value="title">请在以下列表中选择</option>
                <option value="beijing">Java</option>
                <option value="shanghai">Web</option>
                <option value="xian">Python</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>学习</td>
        <td colspan="3">
            <input type="text" placeholder="请输入要学习的内容">
        </td>
    </tr>
    <tr>
        <td>专业</td>
        <td colspan="3">
            <form>
                <input type="search" name="search" placeholder="请输入要学习的内容">
                <input type="submit" value="搜索">
            </form>
        </td>
    </tr>
</table>

表单实操二

在这里插入图片描述

<table align="center">
    <tr>
        <td align="right">姓名：</td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td align="right">密码：</td>
        <td><input type="password"></td>
    </tr>
    <tr>
        <td align="right">确认密码：</td>
        <td><input type="password"></td>
    </tr>
    <tr>
        <td align="right">密码提示问题：</td>
        <td>
            <select>
                <option value="title">请选择一个问题</option>
                <option value="name">我的名字</option>
                <option value="sex">我的性别</option>
                <option value="age">我的年龄</option>
            </select>
        </td>
    </tr>
    <tr>
        <td align="right">密码提示答案：</td>
        <td><input type="text"></td>
    </tr>
    <tr>
        <td align="right">性别：</td>
        <td>
            <form>
                <input type="radio"name="sex" value="nan">男
                <br>
                <input type="radio"name="sex" value="nv">女
            </form>
        </td>
          </tr>
    <tr>
        <td align="right">年龄：</td>
        <td><input type="number"></td>
    </tr>
    <tr>
        <td align="right">籍贯：</td>
        <td>
            <select>
                <option value="title">请选择</option>
                <option value="name">内蒙古</option>
                <option value="sex">陕西</option>
                <option value="age">山西</option>
            </select>
           省/直辖市
            <select>
                <option value="title">请选择</option>
                <option value="name">太原</option>
                <option value="sex">临汾</option>
                <option value="age">大同</option>
            </select>
           市
        </td>
    </tr>
    <tr>
        <td align="right">爱好：</td>
        <td>
            <form>
                <input type="checkbox" name="vehicle" value="sw">上网
                <input type="checkbox" name="vehicle" value="m">看电影
                <input type="checkbox" name="vehicle" value="l">学习
            </form>
        </td>
    </tr>
    <tr>
        <td align="right">个人介绍：</td>
        <td>
            <form name="input" action="url" method="get">
                <textarea rows="10" cols="30"></textarea>
            </form>
        </td>
    </tr>
    <tr>
        <td align="right">上传头像：</td>
        <td>
            <form>
                <input type="file" name="img">
            </form>
        </td>
    </tr>
    <tr align="center">
        <td colspan="2">
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </td>
    </tr>
</table>

实体字符与元素分类

脑袋不灵光的小白羊
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
form表单拖拽功能
12-27
本文将深入探讨"form表单拖拽功能"这一主题，结合提供的文件"FormbuildV1.0"，详细解释其背后的技术实现和相关知识点。 首先，我们需要理解HTML表单的基础结构。一个基本的HTML表单通常由`<form>`标签定义，里面...
form表单
Lotus_fragrance的博客
06-27 1万+
目录1. form表单的基本使用1.2 表单的组成部分1.3标签的属性1.4 表单的同步提交及缺点 2. 通过Ajax提交表单数据2.1 监听表单提交事件2.2 阻止表单默认提交行为2.3 快速获取表单中的数据3. 案例 - 评论列表3.1 渲染UI结构3.2 JS代码#博学谷IT学习技术支持#表单在网页中主要负责数据采集功能。HTML中的标签，就是用于采集用户输入的信息，并通过标签的提交操作，把采集到的信息提交到服务器端进行处理。表单由三个基本部分组成：表单标签 表单域 表单按钮 ...
form基础表单总结
qq_48113035的博客
03-07 1万+
1.
最全【HTML基础篇002】HTML之form表单超详解_html form表单
最新发布
2401_84187537的博客
05-04 1043
【代码】最全【HTML基础篇002】HTML之form表单超详解_html form表单。
【HTML基础篇002】HTML之form表单超详解
周周の博客小屋
12-17 8381
文章目录 🌄一、form表单是什么 🌄二、form表单的属性 🌄三、input中的各种Type属性值 🌄四、文章目录 🌄一、form表单是什么 🌄二、form表单的属性 🌄三、input中的各种Type属性值 🌄四、标签
HTML常用标签之表单form
weixin_45604020的博客
06-21 8802
表单在网页中主要负责数据采集功能。HTML中的标签，就是用于采集用户输入的信息，并且通过标签的提交操作，把采集到的信息提交到服务器端进行处理。
简单的form表单模板
01-16
本文将深入探讨“简单的form表单模板”及其相关知识点。 首先，我们需要了解HTML中的`<form>`标签。它是创建表单的基础，用于定义用户输入数据的区域。例如： ```html <form action="submit.php" method="post"> ...
通过button将form表单的数据提交到action层的实例
08-29
通过按钮将 Form 表单数据提交到 Action 层的实例 在 Web 应用程序开发中，提交 Form 表单数据到后台服务器是一个常见的操作。通常情况下，我们会使用 Form 表单的 action 属性来指定提交的路径，但是在某些情况下...
form表单填写进度条
05-08
使用方法: 1.将fort.css和fort.js引用页面 [removed][removed] <link href="fort/fort.css" rel="stylesheet"> 2.将进度条展示div放进页面,最好放在顶部: ...4.在form标签添加class属性: class="form" 即可;
Form表单模拟美化插件特效代码
03-20
【Form表单模拟美化插件特效代码】是一个专注于提升网页中Form表单视觉效果的工具。在网页设计中，表单元素（如输入框、选择框等）的样式通常是浏览器默认的，这往往不能满足设计师对界面美观度的追求。这款插件就是...
form表单详解
热门推荐
JiuMeilove的博客
07-06 4万+
form表单详解form表单属性 表单在Web网页中用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程序以处理，从而使得Web服务器与用户之间具有交互功能。 表单实现前后台交互：用户将表单提交到后台再右后台提交到数据库的过程，实现前后端交互。 form表单属性 form支持HTML的全局属性 属性 值 描述 accept MIME_type HTML5 不支持。规定服务器接收到的文件的类型。（文件是通过文件上传提交的） accept-charset cha
【HTML基础】form表单属性及常用元素简介
萌萌白白的博客
02-16 2303
本文简单介绍了HTML常用的表单元素form，以及使用form时常用的属性等
Form表单的简单使用
chenmo2001的博客
05-27 3026
Form表单的简单使用 简介 表单是一个包含表单元素的区域，用于搜集不同类型的用户输入。表单元素是允许用户在表单中（比如：文本域、下拉框、单选框、复选框等等）输入信息的元素。表单使用表单标签<form>定义。 布局 完成布局的第一步：创建一个新的项目。 第二步：把我们需要的文件引入进去。 主要有这三个： 可通过栅格系统进行布局 Bootstrap提供了一些表单控件样式、布局选项、以及用来创建广泛多样化的表单的自定义组件。 表单控件 1....
＜form＞表单
qq_50646296的博客
05-25 3794
1.form表单 <form>标签是表单是一个框架，其中主要包含<input>,<textarea>,<select>标签 1.1<input>标签 <input>标签首先是一个单标签 <input>标签的格式是<input type="" value="" name="" > ...
form表单的基本使用
凉茶铺的博客
01-02 2956
介绍了form表单，并对其语法进行了演示说明
前端编程之路一一form表单标签（详解），前端事件分发机制收藏这一篇就够了
m0_61549984的博客
03-20 491
select是显示一个下拉列表(drop down list)出来，option是下拉列表中的项目(item)，而option的文本内容(text content)是下拉列表项目中显示到页面上的值，value是真正需要提交到服务端的值。两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。2、name：为文本框命名，以备后台程序ASP 、PHP使用。3、name：为控件命名，以备后台程序 ASP、PHP 使用。当 type=“checkbox” 时，控件为复选框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值