HTML基础之form表单

news2025/2/26 7:19:36

目录

一:表单属性

1 name 属性

2 action属性

3 method属性

4 target属性

5 enctype属性

二:表单对象

1 input标签

2 多行文本textarea

3 下拉列表select

4 表单控件(元素)button

5 表单控件(元素)label标签


前言:

这里的表单指的是文本框、按钮、下拉列表等的统称。

一:表单属性

表单一共有五个重要属性:name 、 action、 method 和 target属性

1 name 属性

一个页面上的表单可能不止一个,为了区分这些表单,就需要name 属性给表单命名,通常与id属性值相同。需要注意的是表单名称中不能包含特殊字符和空格。

2 action属性

用于指定表单数据提交到那个地址进行处理。

3 method属性

作用是告诉浏览器,指定将表单中的数据使用哪一种HTTP提交方法,取值为get 或者 post。

其中:get 是默认值,表单中的数据被传送到action 属性指定的URL,然后这个新的URL 被传送到处理程序上。

post:表单数据被包含在表单主体中,然后被传送到处理程序上。

两者区别:

get:该请求会将请求参数的名和值转换成字符串,然后拼接到URL 之后,因此在地址栏等地方可以看到请求的参数;但是安全性差,并且安全性差,传输的数量比较小,在URL中的最大长度是2048个字符。

post:该请求方式通过HTTP的post 机制,将所有的请求参数的名和值放在HTML的header 中传输;并且安全性号,传输的数量也大。

4 target属性

该属性与a标签的target 属性一样,都是从来指定目标窗口的打开方式。

取值:

_self: 默认值,表示在当前的窗口打开页面。

_blank:在新的窗口打开页面。

_top: 表示页面载入到包含该链接的窗口,取值在当前的窗口中的所有页面。

_parent: 在父级窗口打开页面。

5 enctype属性

用于设置表单信息提交的编码方式;

取值:

application / x-www-form-urlencoded :默认编码方式;

multipart / form-data : MIME 编码,对于“上传文件” 这种表单必须选择该值;

text / plain: 空格转换为加号(+),但不对特殊字符编码。

二:表单对象

就是放在form 标签内的各种标签,有:input、textarea、select、option、button、label、otpgroup等。

1 input标签

type属性的值:

text:单行文本框

value :定义文本框的默认值,也就是文本框内的文字。

size:定义文本框的长度,单位是一字符。

maxlength :设置文本框最多可以输入的字符数。

radio:单选按钮,name 和 value 是单选按钮中的必要的两个属性,必须要设置。并且同一组单选按钮中各个选项中的 name 属性值必须一样。

checkbox: 普通按钮,checked 属性表示该选项在默认情况下已经被选中。

button:普通按钮

value 属性的取值就是显示在按钮上的文字,onclick 是普通按钮的事(js)

submit: 提交按钮,value 属性的取值就是显示在按钮上的文字,实现将表单内容提交给服务处理。

resrt:重置按钮,value 属性的取值就是显示在按钮上的文字,单击可清除用户在页面当前表单中输入的信息。

file:文件上传,当使用文件域file 时,必须在form标签中指明编码方式,enctype="multipart/form-data",以确保服务器正常接收数据。

image:图片域,拥有按钮的特点,也拥有图像的特点(不常用)。

hidden:隐藏字段(不常用)。

input标签的其他属性:

checked:设置单选框、复选框,初始状态是选中,属性值仅有checked。

disabled:设置首次加载禁用该元素,属性值仅有disabled,表示该元素被禁用。

maxlength:设置文本框输入的最大字符数。

readonly:只读,表示文本框的内容不允许用户直接进行修改。

size:设置该元素的宽度。

src:设置图像域所显示的图像的URL。

<form name="myform" method="post" action="index.html">
			姓名:<input type="text"  value="" size="15" maxlength=""/>
                  <br/>
			年龄:<input type="text" value="18" size="3" maxlength="3"/>
                  <br/>
   			账号:<input type="text" />
                  <br/>
			密码:<input type="password" />
                  <br/>
			年级:<input readonly="年级" />
			</form>
			<div>

2 多行文本textarea

rows:指定可输入的行数。

cols:指定可输入的列数。

readonly:用于指定该文本只读,该属性的值只能是readonly。

3 下拉列表select

下拉列表由select和option两个标签配合使用。

select标签属性:

multiple:可选择属性,只有一个值“multiple”,设定该值是下拉列表可选择多个项,默认只能选择一项。

size:下拉列表展开后可见列表项的数目,需要注意的是不同浏览器的默认值不                            同。

option标签属性:

value:选择值。

selected:是否被选中。

optgroup标签属性:

label:指定该选项组的标签,这个属性必须设置。

       <form>
				<input type="text" value="这是一个文本框" /><br/>
				<textarea></textarea><br/>
				<select>
				<option>HTML</option>
				<option>CSS</option>
				<option>JavaScript</option>
				</select>
		</form>

 

4 表单控件(元素)button

用于定义一个按钮,元素内部可包含普通文、文本格式化元素、图片等。提供了更加丰富的显示内容和视觉效果。

type属性智能有button、resert、submit 3种。

5 表单控件(元素)label标签

用于对其他表单控件(元素)进行说明,主要用于单机<label>元素生成标签,浏览器会自动将焦点转移到和标签相关的表单控件上。

label标签和表单控件关联的方式有两种:

使用label标签和for属性,指定为关联表单控件(元素)的id即可;

将说明和表单控件一起放在label 元素内部即可。

<form action="" method="get" name="" enctype="" target="">
			用户名 <input type="text" name="用户名" id=""/><br/>
			邮箱  <input type="email" name="dly" /><br/>
			<select>
				<option>qq.com</option>
				<option>weixin.com</option>
				<option>xinlaing.com</option>
			</select>
			<p>
			性别 <input type="radio" name="people" value="boy" />男
			     <input type="radio" name="people"  value="gile"/>女<br/>
			爱好 <input type="checkbox" id="" value="" />乒乓球
			     <input type="checkbox" id="" value="" />篮球
				 <input type="checkbox" id="" value="" />排球
			</p>
		上传文件 <input type="file" value="选择文件"/><br/>
		<input type="submit" />
		<input type="resest" /><br/>
		生日 <input type="data" name="生日" id="" />
			</form>

>
>✨$\textcolor{blue}{原创不易,还希望各位大佬支持一下}$ <br/>
>👍 $\textcolor{green}{点赞,你的认可是我创作的动力!}$ <br/>
>⭐️ $\textcolor{green}{收藏,你的青睐是我努力的方向!}$ <br/>
>✏️ $\textcolor{green}{评论,你的意见是我进步的财富!}$ <br/>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407994.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vuex持久化插件(vuex-persistedstate)

为什么使用持久化 目的: 让在vuex中管理的状态数据同时储存在本地。可免去自己储存的环节。 在开发的过程中&#xff0c;像用户信息&#xff08;名字&#xff0c;头像&#xff0c;token&#xff09;需要vuex中储存且需要本地储存再例如&#xff0c;购物车如果需要未登录状态下…

Router-view

我们都知道&#xff0c;路由指的是组件和路径的一种映射关系。Router-view也被称为路由的出口,今天我们就探讨下如何去使用路由出口。 也就是: 路径--------------------------------------------------------------->页面 可以把router-view理解成一类代码存放的位置。 …

vue3项目中使用three.js

vue3项目中使用three.js前言一、three.js是什么&#xff1f;二、vue3中下载与安装three.js三、操作步骤1.创建场景2.创建物体3.添加光源4.添加相机5.开始渲染四、myThree.vue源代码五、效果图1.单个模型2.多个模型总结前言 在vue3项目中&#xff0c;通过three.js使用了一段短小…

java 课程设计——银行管理系统

银行管理系统&#xff08;java&#xff09; 环境&#xff1a; idea2020 jdk1.8 能实现的功能&#xff1a; 1.注册账户 2.登录 3.查询账户信息 4.存款 5.取款 6.向另一个账户转账 7.修改账户密码 8.注销账户 项目结构 项目演示 1.主页面&#xff1a; 2.注册账号&#xff1a;…

多行文本溢出显示省略号

文本溢出显示省略号分两种情况&#xff0c;单行文本溢出显示省略号&#xff08;参考上篇文章https://blog.csdn.net/qq_43687594/article/details/123511873&#xff09;&#xff0c;另外一种就是多行文本溢出显示省略号。 多行文本显示省略号有两种办法 第一种&#xff1a; …

解决Vue刷新后页面数据丢失的问题(sessionStorage和localStorage的用法)

一、为什么刷新后数据会丢失 vuex存储的数据只是在页面中&#xff0c;相当于全局变量&#xff0c;页面刷新的时候vuex里的数据会重新初始化&#xff0c;导致数据丢失。因为vuex里的数据是保存在运行内存中的&#xff0c;当页面刷新时&#xff0c;页面会重新加载vue实例&#xf…

初识React及React开发依赖介绍

文章目录初识ReactReact介绍React特点React的依赖介绍React的开发依赖Babel和React的关系React的依赖引入初识React React介绍 React是什么呢? 相信每个做开发的人对它都或多或少有一些印象; 这里我们来看一下官方对它的解释:用于构建用户界面的 JavaScript 库; 目前对于前端…

H5页面实现微信授权登录

项目需求描述&#xff1a; 用户通过扫码海报携带活动二维码跳转到h5页面&#xff0c;并且完成微信授权&#xff0c;完成授权的用户进入小程序后不再进行授权操作。这里边涉及到了两个大问题&#xff0c;一是怎样在一个域名下部署两个项目&#xff0c;二是用户点击授权之后跳转…

vue.js not detected问题解决

最近在看vue的时候&#xff0c;发现之前装过的vuedevtools提示vue.js is not detected。重装了一次后&#xff0c;发现对于没有应用vue框架的页面&#xff0c;的确是检测不到vue.js&#xff0c;所以报这个很正常&#xff1b;切换到有vue.js资源的页面&#xff0c;调试界面就会自…

史上最详细vue的入门基础

一&#xff1a;Vue Vue&#xff1a;一种用于构建用户界面的渐进式javascript框架 Vue可以自底向上逐层的应用简单应用:只需一个轻量小巧的核心库复杂应用:可以引入各式各样的Vue插件 特定&#xff1a; 1、采用组件化模式&#xff0c;提高代码复用率&#xff0c;且让代码更好…

安装与配置webpack-dev-serve

作用 相当于在本地开启了一个服务&#xff0c;我们可以通过http网络请求访问提高了IO性能&#xff0c;因为webpack-dev-server将我们的文件编译后放到内存里面&#xff0c;以空间换时间无需我们每次都需要手动编译我们的文件&#xff0c;我们每次保存文件&#xff0c;就会自动…

【web前端面试宝典】经典10问(上篇)

&#x1f41a;作者简介&#xff1a;苏凉&#xff08;专注于网络爬虫&#xff0c;数据分析&#xff0c;正在学习前端的路上&#xff09; &#x1f433;博客主页&#xff1a;苏凉.py的博客 &#x1f310;系列专栏&#xff1a;前端面试 &#x1f451;名言警句&#xff1a;海阔凭鱼…

Vue:实现TodoList案例(尚硅谷)

Vue核心&#xff1a;Vue核心&#xff1a;组件化编程&#xff08;脚手架&#xff09; 一、静态页面 app.vue 注&#xff1a; MyItem.vue不直接在app.vue中引入&#xff0c;而在MyList.vue中引入 <template><div id"root"><div class"todo-cont…

【微信小程序】一文读懂,数据请求

&#x1f352;观众老爷们好呀&#xff0c;这里是前端小刘不怕牛牛频道&#xff0c;小程序系列又更新新文章啦&#xff0c;上文我们讲解了微信小程序的全局配置和局部配置&#xff0c;那么今天就让我们来学习微信小程序的数据请求&#xff0c;这可是做小程序交互效果和绑定数据动…

react生命周期详细介绍

目录 挂载&#xff1a;在组件实例被创建并插入到dom中时&#xff0c;生命周期调用顺序如下 constructor componentWillMount getDerivedStateFromProps render componentDidMount 更新&#xff1a;当组件的 props 或 state 发生变化时会触发更新。 componentWillReceive…

教你如何手写一个Promise

想要源码的可以看这里&#xff0c;里面也有一些其他的知识 想要手写一个promise&#xff0c;首先就要了解promise&#xff0c;想必大家都被过一些promise的面试题&#xff0c;知道一些promise的用法&#xff0c;主要考的就是一种异步编程的思想。 了解promise 我们先来看看直…

Node.js——http模块和导出共享

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;也会涉及到服务端 &#x1f4c3;个人状态&#xff1a; 在校大学生一枚&#xff0c;已拿 offer&#xff08;秋招&#xff09; &#x1f947;推荐学习&…

uni-app 自定义下拉框

如图&#xff1a; html&#xff1a; <view class"row-item"> <view class"lable-tit">性别&#xff1a;</view> <view class"selected-all"> <view class"drop-down-box" click"btnShowHideClick…

JavaScript DOM基础

文章目录前言一、DOM 简介1.1 什么是 DOM1.2 DOM 树二、获取元素2.1 如何获取页面元素2.2 根据 ID 获取2.3 根据标签名获取2.4 通过 HTML5 新增的方法获取2.5 获取特殊元素&#xff08;body&#xff0c;html&#xff09;三、事件基础3.1 事件概述3.2 事件三要素3.3 执行事件的步…

Ant Design Pro(5)-7.高级表格ProTable

Ant Design Pro 高级表格ProTable的使用 文章目录Ant Design Pro 高级表格ProTable的使用一. 简介1. 什么是ProTable&#xff1f;2. 何时使用ProTable&#xff1f;二. 使用1. ProTable属性及使用2. ActionRef 手动触发3. Columns 列定义4. 批量操作5. 搜索表单一. 简介 1. 什么…