首页 > 其他分享 >HTML常用表单元素使用?

HTML常用表单元素使用?

时间:2023-12-09 11:44:36浏览次数:23  
标签:控件 -- 元素 表单 HTML 输入 按钮 ###

## 表单的基本语法
```
<form action="表单提交地址" method="提交方法">
… 文本框、按钮等表单元素…
</form>
```
### 表单属性:

- action 将表单数据提交到指定地址
- method 表单数据发送至服务器的方法,常用的有两种 get(默认)/post。
### get和post的区别
- get:从指定的资源请求数据。
- post:向指定的资源提交要被处理的数据

## 表单控件元素
### 表单输入控件
input标签:用来定义输入控件。这个标签非常有用,它可以实现各种各样的表单控件效果。

根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等

| 控件名称 | type属性值 |
|--|--|
| 文本框 | text |
|密码框 | password|
|单选按钮 |radio |
|复选框 |checkbox |
|下拉列表 |select |
|提交按钮 |submit |
|多行文本域 |textarea |
|文件域 |file |
|邮箱 | email|
|网址 |url |
|手机号 |tel |
|数字 | number|
|滑块 | range|
|搜索框 | search|
```
<form>
<!--文本框-->
<p> 姓名: <input type="text" name="te" size="30px" maxlength="1"></p>
<!--密码框-->
<p> 密码: <input type="password" name="pws" size="100px" maxlength="5"></p>
<!--提交-->
<input type="submit" name="tj" value="提交">
<!--重置-->
<input type="reset" name="cz" valut="重置">
<!--下拉列表-->
<select name="recourse">
<option value="高等数学" selected>高等数学</option>
<option value="离散数学">离散数学</option>
<option value="高等数学">高等数学</option>
<option value="概率论">概率论</option>
</select>
<!--单选按钮-->
<p> 1 <input type="radio" name="1"></p>
<p> 2 <input type="radio" name="1" checked="checked"></p>
<!--复选框-->
<p> 1 <input type="checkbox" name="1"></p>
<p> 2 <input type="checkbox" name="2"></p>
<p> 3 <input type="checkbox" name="3" checked="checked"></p>
<!--文件域-->
<p><input type="file" name="a"></p>
<!--邮箱-->
<p> 邮箱<input type="email" name="yx"></p>
<!--网址-->
<p> 网址<input type="url" name="dz"></p>
<!--数字-->
<p> 数字<input type="number" name="num" max="100" min="0" step="5"></p>
<!--滑块-->
<p> 滑块<input type="range" max="100" min="0" step="5"></p>
<!--搜索-->
<p> 搜索<input type="search" name="sousuo"></p>
</form>
```
![在这里插入图片描述](/i/ll/?i=direct/b739a445fa264b328edddb809cdc2ee5.png)
### 控件属性
| 属性 | 描述 |
|--|--|
| value | 文本框赋默认值 |
| checked | 默认按钮,单选和复选都可用 |
| maxlength | 输入最大长度 |
|hidden | 隐藏|
| readonly |只读 |
| disabled | 禁用 |
|label |聚焦 |
|outline: none;|轮廓 |
|placeholder | 提示输入|
|required |必填 |

 

标签:控件,--,元素,表单,HTML,输入,按钮,###
From: https://www.cnblogs.com/xioaliang/p/17890709.html

相关文章

  • HTML中的三个列表,具体的使用及列表样式
    HTML有三种列表:##一、有序列表有序列表(Orderedlists):用数字或字母来标记列表项,每个列表项前会有一个数字或字母。```html<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol>```##二、无序列表无序列表(Unorderedlists):用符号来标记列表项,每个列表项前会有一个......
  • HTML笔记
    1.什么是HTMl:HTML(HyperTextMarkupLanguage)是一种用于创建网页的标准标记语言。它使用一系列标签来定义网页的结构、内容和样式。HTML文档由一系列的元素组成,这些元素包括标题、段落、链接、图片、列表等。通过使用HTML标签,开发者可以创建出具有交互性和动态效果的网页。2.HTML......
  • 代码随想训练营第五十九天(Python)| 503.下一个更大元素II、42. 接雨水
    [503.下一个更大元素II]循环问题用2*n,i%n的方式n=len(nums)ans=[-1]*nstack=[]foriinrange(2*n):whilelen(stack)>0andnums[i%n]>nums[stack[-1]]:ans[stack[-1]]=nums[i%n......
  • 如何给网页和代码做HTML加密?
    ​如何给网页和代码做HTML加密?本篇文章给大家谈谈html混淆加密在线,以及HTML在线加密对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。   ​如何给代码加密?1、源代码加密软件推荐使用德人合科技的加密软件,是一套从源头上保障数据安全和使用安全的软件系统。采用的......
  • 用html+css+js做canvas烟花模拟网页动画代码
    圣诞节、元旦就要到了,本案例我们将用html+css+js做canvas烟花模拟网页动画代码,程序员的浪漫这不就来了嘛,与家人朋友一起看烟花吧!   附源码<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"/> <title>烟花模拟器</title> <metaname="viewport"......
  • Vue路由params、query传参用法,以及form表单回车自动提交问题
    一、路由参数用法1.1query参数第一种方式传参:跳转路由并携带query参数,注意to的字符串写法将id和title拼接字符串形成地址<router-link:to="`/home/message/detail?id=${item.id}&title=${item.title}`">{{item.title}}</router-link>&nbsp;&nbsp;第二种方式传参:to......
  • Vue学习计划-Vue2--Vue核心(五)条件、列表渲染、表单数据
    1.条件渲染v-ifv-if="表达式"v-else-if="表达式"v-else="表达式"适用于:切换频率较低的场景特点:不显示dom元素,直接被删除注意:v-if和v-else-if、v-else一起使用,但要求结构不能被打断v-if和template一起使用,v-show不可以v-showv-show="表达式"适用于:切换频......
  • HTML中title标签的使用
    HTML中的title标签是非常重要的标签之一,它用来描述网页的标题。在搜索引擎优化中,title标签是非常关键的,因为搜索引擎会将title标签中的文字作为页面的主要描述,并根据其相关性来判断网页内容的质量和权重。本文将详细讲解title标签的使用,包括以下内容:@[toc]##1.title标签的基本用......
  • 界面控件DevExpress中文教程 - 如何用Office File API组件填充PDF表单
    DevExpressOfficeFileAPI是一个专为C#,VB.NET和ASP.NET等开发人员提供的非可视化.NET库。有了这个库,不用安装MicrosoftOffice,就可以完全自动处理Excel、Word等文档。开发人员使用一个非常易于操作的API就可以生成XLS,XLSx,DOC,DOCx,RTF,CSV和SnapReport等企业级文......
  • 在HTML或者JSP中使用Element Plus
    我们都知道如何在node项目中,使用ElementPlus等UI框架,但在单页面中我们该如何引入ElementPlus呢?以下我们以HTML或JSP引入ElementPlus为例,需要按照以下步骤进行引用:步骤一下载ElementPlus首先,您需要下载ElementPlus的文件。您可以通过以下方式下载ElementPlus:访问ElementPlus......