05_HTML_表单标签(form标签)_form标签中常用的标签元素

已于 2023-01-13 01:56:21 修改
阅读量1.1k 收藏 2
点赞数 2
分类专栏： 网页开发基础 文章标签： html 前端
于 2023-01-11 18:35:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45657848/article/details/128642703
版权

目录

一、什么是表单？

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。

表单使用表单标签（<form>）定义。

注意，表单本身并不可见。


二、输入类型（input 元素）

多数情况下被用到的表单标签是输入标签<input>。
输入类型是由属性（type）定义的。大多数常用的输入类型如下：

更加详细的 input标签类型的内容 可以参考以下链接：
https://www.w3school.com.cn/html/html_form_input_types.asp


1.文本输入框（text）& 密码输入框（password）

当用户要在表单中键入字母、数字等内容时，就会用到文本域。

type类型：
	text     文本输入框（value设置默认显示内容）
	password 密码输入框（value设置默认显示内容）
	注：password输入框的内容会被做掩码处理（显示为星号或实心圆）。

示例

    <form>
        用户名称：<input type="text" value="默认值"/><br/>
        
        用户密码：<input type="password" value="“abc"/><br/>
    </form>

运行效果
在这里插入图片描述


2.单选按钮（radio）

当用户从若干给定的的选择中选取其一时，就会用到单选框。

type类型：
	radio 单选框
	    name属性可以进行分组（同一组内的单选只能选一个）
	    （checked="checked"可以表示默认选中）

示例

    <form>
        性别：<input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女<br/>
    </form>

运行效果
在这里插入图片描述


3.复选框（checkbox）

当用户需要从若干给定的选择中选取一个或若干选项时，就会用到复选框。

type类型：
	 checkbox 是复选框
     	（checked="checked"可以表示默认选中）
          *单选框只能有一个checked="checked"（多了就会冲突 只会有一个生效）
          *复选框可以多个checked="checked"

示例

    <form>
        兴趣爱好：<input type="checkbox" checked="checked"/>唱
                    <input type="checkbox" checked="checked"/>跳
                    <input type="checkbox"/>Rap
                    <input type="checkbox"/>篮球<br/>
    </form>

运行效果
在这里插入图片描述


4.重置按钮（reset）

<input type=“reset”> 定义为重置按钮，点击重置按钮会重置此页面所有的内容

type类型：
    reset 是重置按钮（点击后全部恢复为原来的默认值）
    	value   设置重置按钮上的文本（默认是"重置"二字）

示例

        <form>
            用户名称：<input type="text" value="默认值"/><br/>
            用户密码：<input type="password" value="“abc"/><br/>
            确认密码：<input type="password" value="“abc"/><br/>
            
            性别：<input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女<br/>
            
            兴趣爱好：<input type="checkbox" checked="checked"/>唱
            <input type="checkbox" checked="checked"/>跳
            <input type="checkbox"/>Rap
            <input type="checkbox"/>篮球<br/>

            <input type="reset" value="点击重置"><!--默认是"重置"二字-->
        </form>

运行效果
在这里插入图片描述


5. 日期的输入字段（date）

<input type=“date”> 用于应该包含日期的输入字段。

根据浏览器支持，日期选择器会出现输入字段中。
示例

        <form>
            Date:
            <input type="date" name="date">
        </form>

运行效果
在这里插入图片描述


6. 按钮（button）

<input type="button> 定义按钮。

示例

        <form>
            <input type="button" onclick="alert('Hello World!')" value="按钮1">
            
            <button onclick="alert('Hello World!')">按钮2</button>
        </form>

tip：这里再标签中添加了一个onclick点击事件，让效果更明显

运行效果
在这里插入图片描述

 这里<input type="button" value="按钮"> 和 <button>按钮</button>的效果其实是一致的，都会产生一个按钮。
 
 input标签中的value属性值对应的就是button标签中的内容，也就是按钮上显示的字符。

7.提交按钮（submit）& 文件上传域（file）

定义提交表单数据至表单处理程序的按钮。
表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面。
在表单的 action 属性中规定表单处理程序（form-handler）：

type类型：
	submit  提交按钮
	    value   设置提交按钮上的文本（默认是"提交"二字）
    file    文件上传域

示例

        <form>
            <input type="submit" value="点击提交"><!--默认是"提交"二字-->
            <input type="file">
        </form>

运行效果
在这里插入图片描述
点击提交会将文件上传至服务器。
关于提交按钮（submit）和文件上传域（file）的具体示例在下篇文章：http://t.csdn.cn/TNCPB


三、下拉列表（select 元素 & option 元素）

<select> 元素定义下拉列表
<option> 元素定义待选择的选项

列表通常会把首个选项显示为被选选项。

您能够通过添加 selected 属性来定义预定义选项。

select标签    是下拉列表框
option标签    是下拉列表框中的选项（selected="selected"设置默认选中）

示例

       <form>
            国籍：
            <select>
                <option>--请选择国籍--</option>
                <option selected="selected">中国</option>
                <option>美国</option>
                <option>日本</option>
            </select>
        </form>

运行效果
在这里插入图片描述

四、多行输入字段（文本域 textarea 元素）

<textarea> 元素定义多行输入字段（文本域）

textarea标签  表示多行文本输入框（标签和结束标签中的内容是默认值）
		row   设置可以显示几行的高度
        cols  设置每行可以显示几个字符宽度

示例

        <form>
            自我评价：
            <textarea rows="10" cols="20">我才是默认值</textarea>
        </form>

运行效果
在这里插入图片描述


五、表单格式化

就是将表单内容放置在单元格中，这样会使排版更加清晰工整。

示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        
        <form>
            <h1 align="center">用户</h1>
            <table align="center">
                <tr>
                    <td>用户名称：</td>
                    <td><input type="text" value="默认值"/></td>
                </tr>
                <tr>
                    <td>用户密码：</td>
                    <td><input type="password" value="“abc"/></td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td>
                        <input type="radio" name="sex" checked="checked">男
                        <input type="radio" name="sex">女
                    </td>
                </tr>
                <tr>
                    <td>兴趣爱好：</td>
                    <td>
                        <input type="checkbox" checked="checked"/>唱
                        <input type="checkbox" checked="checked"/>跳
                        <input type="checkbox"/>Rap
                        <input type="checkbox"/>篮球
                    </td>
                </tr>
                <tr>
                    <td>国籍：</td>
                    <td>
                        <select>
                            <option>--请选择国籍--</option>
                            <option selected="selected">中国</option>
                            <option>美国</option>
                            <option>日本</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>自我评价：</td>
                    <td><textarea rows="10" cols="20">我才是默认值</textarea><br/></td>
                </tr>
                
                <tr>
                    <td>
                        <input type="reset" value="点击重置">
                    </td>
                    <td>
                        <input type="submit" value="点击提交">
                    </td>
                </tr>
            </table>
        
        </form>
    
    
    </body>
</html>

运行效果
在这里插入图片描述

html标签属性、form表单标签、iframe框架标签、table表格标签
大灰狼的博客
10-19 374
一、html标签属性 标签由标签名、标签属性、文本内容三部分组成（单标签没有文本内容）。 标签属性是对标签的一种描述方式。 标签属性分为通用属性、自有属性和自定义属性。 通用属性：所有标签都具有的属性。 通用属性： id：给标签取一个唯一的名称。id名称在网页中必须是唯一的。 class：给标签取一个类名。 style：用来设置该标签的样式，行内样式。 title：当鼠标移到该标签时所显示的提示内容。 自定义属性：通常用来传值或用于图片懒加载等方面。 格式：data-* 二、fo
form表单标签
xun_fong的博客
05-28 6681
一、form表单标签 form标签是一个块级元素，以<form>开头，</form>结尾，它能够包含input、textarea、select等元素。 1.表单标签的属性 form表单常用属性 属性 值 说明 action URL 指定表单发送的地址; method get post 指定数据传送到服务器的方式，get会将发送的数据显示在地址栏，post就不会，单论安全而言，post安全性更高; name
html常用标签之-表单标签
world_kun的博客
11-30 2172
1 表单标签(掌握) 现实中的表单，类似我们去银行办理信用卡填写的单子。 表单目的是为了收集用户信息。 在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。 在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。 表单控件： ​ 包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。 提示信...
2、表单标签
sailCastanea的博客
08-04 1068
1、表单标签 使用表单的目的是为了收集用户信息。在网页中也需要表单与客户进行交互，收集用户资料。 1.1表单的组成 一个完整的表单一般是由表单域、表单控件（或表单元素）和提示信息三个部分组成。 1.2表单域 表单域是一个包含表单元素的区域，<form>标签用于定义表单域，以实现用户信息的收集和传递，并把它所在范围内的表单元素提交给服务器。 <form action=”url地址” method=”提交方式” name=“表单域名称“> 各种表单元素控件 <...
HTML常用标签之表单form
weixin_45604020的博客
06-21 9964
表单在网页中主要负责数据采集功能。HTML中的标签，就是用于采集用户输入的信息，并且通过标签的提交操作，把采集到的信息提交到服务器端进行处理。
HTML的form表单标签用法学习教程
12-13
HTML中表单可以用来搜集用户各种类型的输入信息。表单实际上是包含表单元素的区域，在这个区域中的各种元素的输入信息最终都将通过表单提交到程序脚本中...多数情况下被用到的表单标签是输入标签（<input>）。输
HTML_tag.rar_HTML 手册_html t_html tag_html 标签 手册
09-23
9. **表单标签**：`<form>`、`<input>`、`<textarea>`、`<select>`、`<option>`和`<button>`用于创建交互式表单，收集用户输入。 10. **交互性标签**：HTML5引入了一些新的交互元素，如`<canvas>`用于绘制图形，`...
HTML.rar_HTML 手册_html 标签 手册
09-22
9. **表单元素**：HTML表单允许用户输入数据，如`<form>`定义表单，`<input>`定义各种类型的输入字段（文本、密码、按钮等），`<textarea>`用于多行文本输入，`<label>`关联输入字段和其描述，`<select>`和`<option>...
Lesson02_03 表单标签
10-31
本节将详细讲解HTML中的表单标签及其相关属性。 首先，`<form>` 标签用于创建一个表单，它是所有表单元素的容器，定义了表单的开始和结束位置。例如： ```html <form></form> ``` 表单可以包含各种输入元素，如...
HTML的表单form以及form内部标签的使用
09-28
在HTML中，`<form>`标签是用来创建表单的基本元素。`<form>`标签具有两个关键属性：`action`和`method`。`action`属性指定表单数据的提交目的地，即服务器上的处理脚本或页面的URL。`method`属性定义了数据提交的...
html常见的表单元素有哪些,html表单元素有哪些？
weixin_36194102的博客
06-10 5184
HTML中常用的表单元素包括：文本区域(TEXTAREA)，列表框(SELECT)，文本输入框(INPUT type=text)，密码输入框(INPUT type=password)，单选输入框(INPUT type=radio)，复选输入框(INPUT type=checkbox)，重置按钮、提交按钮、隐藏域、等等。一、文本域二、密码域密码跟文本框类似，但是在里面输入的内容显示为圆点。三、单选按...
常见表单元素格式
m0_55068275的博客
12-08 907
目录 一、表单语法 二、表单元素格式-语法 三、表单的高级应用（隐藏域、只读、禁用） 四、表单的初级验证 总结： 一、表单语法 <form method="post" action="result.html"> <p> 名字：<input name="name" type="text" > </p> <p> 密码：<input name="pass" type="password" >...
前端学习笔记一一HTML表单标签（form）
最新发布
2401_84433570的博客
04-27 789
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。
【HTML基础】form表单属性及常用元素简介
萌萌白白的博客
02-16 3390
本文简单介绍了HTML常用的表单元素form，以及使用form时常用的属性等
HTML常用标签之表单标签
m0_61794291的博客
01-21 3472
HTML常用标签之表单标签前言一、表单域二、表单元素1.input 输入表单元素2.select 下拉表单元素3.textarea 表单元素 前言 在网页中，我们需要跟用户进行交互，手机用户资料，此时就需要用到表单标签 在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息三个部分构成 一、表单域 表单域是一个包含表单元素的区域 在HTML标签中，<form>标签用于定于表单域，以实现用户信息的收集和传递 <form>会把它范围内的表单元素信息提交给服务..
html表单控件元素
qq_45904018的博客
12-01 1369
HTML中常用的表单元素包括：文本区域（TEXTAREA），列表框（SELECT），文本输入框（INPUT type=text），密码输入框（INPUT type=password），单选输入框（INPUT type=radio），复选输入框（INPUT type=checkbox），重置按钮、提交按钮、隐藏域、等等。 一、文本域<input type="text" name="text" value="" /> 二、密码域 密码跟文本框类似，但是在里面输入的内容显示为圆点。 <in
form表单的元素及方法
weixin_49337957的博客
12-27 1336
FORM表单FORM标签input元素select元素textarea元素下面给大家统统演示一遍 关于form表单，对前端后、端的程序员都是必会的知识点，那么今天来聊一聊关于form表单的基本元素及其使用方法把！ FORM标签 form标签，也就是form表单。表单里的每一个元素都要被form包起来，比如： <form> <input> <select> </select> <form> input元素 input标签是用来收集用户数据的元
form标签
热门推荐
atomin的博客
01-31 1万+
form标签 文章目录form标签表单与表单元素一、定义1、表单2、表单元素二、标签1、form标签2、文本框、密码框input3、按钮提交按钮（input+submit）重置按钮（input+reset）4、单选框、复选框5、下拉列表框select—option6、文本域textarea 表单与表单元素 输入框、文本框都是表单元素 ·使用input标签实现（账户、密码等表单元素） ·下拉列表用select标签实现 ·设置文本域标签—textarea 一、定义 1、表单 表单是一个区域、采集用户信息 2
表单元素盘点第二弹＜form＞＜textarea＞元素详细介绍
GUIDM的博客
05-04 2068
表单元素第一弹，适合新手小白！学生党笔记使用！
Struts标签库详解：HTML元素与表单标签
- `<html:form>`: 创建HTML表单，主要属性包括`name`（表单名）、`method`（HTTP请求方法，如GET或POST）和`action`（处理表单的控制器地址）。 - `<html:text>`: 生成HTML文本输入框，用于用户输入。 - `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值