form表单的基本使用

于 2022-07-18 16:21:34 发布
阅读量118 收藏
点赞数
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57104988/article/details/125853933
版权 

<!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>
    <div style="width: 400px; float: left;">
        <h1>form表单</h1>

        <form action="xx">
            <!-- 明文输入框 -->
            用户名:<input type="text" name="admin" placeholder="请输入用户名"><br>
            <!-- 暗文输入框 -->
            密&nbsp&nbsp&nbsp&nbsp码:<input type="password" name="password" value="" placeholder="请输入密码"><br>
            <!-- 单选框 -->
            上海<input type="radio" name="city" value="上海">
            昆山<input type="radio" name="city" value="昆山" checked>
            广州<input type="radio" name="city" value="广州"><br>
            <!-- 多选框 -->
            苹果<input type="checkbox" name="fruits" id="pingguo">
            香蕉<input type="checkbox" name="fruits" id="xiangjiao">
            葡萄<input type="checkbox" name="fruits" id="putao"><br>
            <!-- 文件上传 -->
            <input type="file" name="" id=""><br>
            <!-- 提交按钮 -->
            <input type="submit"><br>

            <!-- 普通按钮 -->
            <input type="button" value="普通按钮"><br>
            <!-- 重置按钮 -->
            <input type="reset" value="重置按钮"><br>

            <!-- 隐藏域 -->
            <input type="hidden" name="隐藏域" value="123"><br>

            <!-- 下拉列表 -->
            <select name="home" id="">
                <optgroup label="一线城市">
                    <option value="sahnghai">上海</option>
                    <option value="guangzhou">广州</option>
                    <option value="beijing">北京</option>
                </optgroup>
                <optgroup label="二线城市">
                    <option value="liuzhou">柳州</option>
                    <option value="nanning">南宁</option>
                    <option value="河池">河池</option>
                </optgroup>
            </select><br>
            <!-- 多行输入框 -->
            <textarea name="textarea1" id="" cols="30" rows="10">
            </textarea><br>
            <!-- fieldset组件 -->
            <fieldset style="width: 200px;">
                <legend>请登录</legend>
                账号：<input type="text">
                密码：<input type="password" name="" id="">
            </fieldset><br>
        </form>
    </div>
    <div style="width: 400px; float: left;">
        <h1>H5新增新特性</h1>
        <form action="xx">
            <!-- datalist标签 -->
            城市：<input type="text" list="list1">
            <datalist id="list1">
                <option>上海</option>
                <option>广州</option>
                <option>杭州</option>
            </datalist><br>
            <!-- 进度条 -->
            <progress value="20" max="100"></progress><br><br>
            <!-- 邮箱 可以自动校验输入的内容是否符合邮箱的格式-->
            邮箱：<input type="email" name="" id=""><br><br>
            <!-- 域名 可以自动校验输入的内容是否是URL地址 -->
            域名：<input type="url" name="" id=""><br><br>
            <!-- 数字  输入框中只能输入数字-->
            数字：<input type="number"><br><br>
            <!-- 时间 可以通过日历来选择时间 -->
            时间：<input type="date"><br><br>
            <!-- 颜色 可以通过取色板来选择颜色 -->
            颜色：<input type="color" name="" id=""><br><br>
        </form>
    </div>
</body>

</html>

liangzc66
关注
HTML中表单(form)详细讲解：
qq_43690438的博客
07-22 718
HTML中表单(form)详细讲解： 表单标签：form <form action="" method=""></form> ​ action：服务器的地址（北京）； ​ method：提交的方式（坐飞机，火车去北京）； 表单元素: 关联标签：label 显示关联：在label中for属性与input的id属性设为同样的值，使他们达到关联的效果。 <label for="username">用户名</label> <input id="
日历、form表单的布局、新增编辑弹框的回填和封装
weixin_44870969的博客
04-27 267
new Date() Tue Apr 26 2022 15:54:50 GMT+0800 (中国标准时间)
form的text设置默认值
wtt561111的专栏
05-10 9026
有时候我们在修改信息的时候，要跳转到一个页面，其实就是一个form，里面有te
springmvc-form表单的使用
04-24
### Spring MVC Form表单的使用详解 #### 一、Spring MVC Form 表单的基本概念 在Web开发中，表单是实现用户与服务器之间交互的重要工具。Spring MVC框架提供了强大的表单支持，允许开发者轻松地处理HTTP请求中的...
使用layui前端框架弹出form表单以及提交的示例
10-16
在本文中，我们将深入探讨如何使用layui前端框架来弹出form表单并进行数据提交。layui是一款基于HTML5和CSS3的轻量级前端组件库，它提供了丰富的UI组件和强大的交互功能，使得Web开发更加便捷高效。下面，我们就按照...
vue自定义表单生成器form-create使用详解
10-16
3. **生成表单** - 在模板中使用 `<form-create>` 标签，通过 `v-model` 绑定表单实例对象 `$f`，并传入 `rule` 规则： ```html <form-create v-model="$f" :rule="rule" @on-submit="onSubmit"></form-create> ...
C# post方式提交Form表单
01-08
在IT行业中，C#是一种...通过以上内容，你应该对C#中如何使用POST方式提交Form表单有了全面的理解。在实际项目中，你可以根据具体需求对这个基础示例进行扩展，例如添加自定义的请求头、处理Cookies、设置超时时间等。
form表单拖拽功能
12-27
本文将深入探讨"form表单拖拽功能"这一主题，结合提供的文件"FormbuildV1.0"，详细解释其背后的技术实现和相关知识点。 首先，我们需要理解HTML表单的基础结构。一个基本的HTML表单通常由`<form>`标签定义，里面...
javascript验证表单大全
04-30
收集了javascript中验证表单，最全的表单验证，总有一款适合你！
css中表单使用技巧
sinat_31907813的博客
09-18 542
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下： 1、标签 定义整体的表单区域 action属性 定义表单数据提交地址 method属性 定义表单提交的方式，一般有“get”方式和“post”方式 2、标签 为表单元素定义文字标注 3、标签 定义通用的表单元素 type属性： type="text" 定义单行文本输入框 type="password" 定义...
表单标签
liupc的学习笔记
03-03 1818
一、什么是表单标签 二、格式 一、什么是表单标签？(非常重要) 比如提交数据到开心网的服务器，这个过程可以使用表单标签实现。 二、格式 <form action="hello.htm" method="post"></form> 定义一个表单...
Form表单的简单使用
chenmo2001的博客
05-27 3069
Form表单的简单使用 简介 表单是一个包含表单元素的区域，用于搜集不同类型的用户输入。表单元素是允许用户在表单中（比如：文本域、下拉框、单选框、复选框等等）输入信息的元素。表单使用表单标签<form>定义。 布局 完成布局的第一步：创建一个新的项目。 第二步：把我们需要的文件引入进去。 主要有这三个： 可通过栅格系统进行布局 Bootstrap提供了一些表单控件样式、布局选项、以及用来创建广泛多样化的表单的自定义组件。 表单控件 1....
form表单的应用
qq_54081982的博客
08-20 1405
1、form表单是在网站制作中常用到的功能，例如用户名的注册，简历的制作等都会用到form表单。 HTML 中规定，使用 <form> 标签来表示表单。我们都知道表格的行、列及单元格需要放在<table></table> 标签中，表单里的元素也不例外，同样需要放在 <form></form> 标签中。<form> 标签有几个常用的属性，见下表： <form> 标签的常用属性 常用属性 属性值 说明 .
零基础学html第一天
dengshixiang4897的博客
07-24 75
html:超文本标记语言 unicode（UTF-8）：万国码 <...>：标记标签 &nbsp; :空格 <br>:换行 <hr>:水平线 <p></p>:段落标签 <sup></sup>:上角标（如：y=x^2） <sub></sub>:下角标 &lt...
【HTML5】——表单
袅袅青烟散的博客
10-08 697
HTML5的作用： 提供了更加强大的功能，方便开发 在移动端使用对应的input类型，当用户输入的时候，可以调取出对应的虚拟键盘，方便用户快速输入 相对于传统的表单类型提供了新的验证方式 目录1.传统input表单类型 2.input新类型 3.表单新元素 4.表单新属性 5.表单新验证1.传统input表单类型text、password、submit、reset、button、radio、
html中form表单的使用方法和介绍
热门推荐
王永存
10-04 8万+
form表单的使用方法 第1节、表单赏析 第2节、了解表单 功能：用于搜集不同类型的用户输入的内容   有了表单，网页的内容可以由用户自己创建，那么对于网页来说，我们既是网页创建都者，也是网页的消费者。 第2节、常用的表单元素 ü  form   表单 ü  input   表单元素，表单项 ü  select和option  下拉菜单 ü  tex
HTML表单form使用详解：实例解析
1. form表单标签 `<form>`标签是定义表单的核心，用于包裹所有表单控件。其基本语法如下： ``` <form method="传送方式" action="服务器文件"> </form> ``` - `method`属性决定了数据的提交方式，通常有`GET`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值