html form 表单

article/2025/1/16 8:07:42

定义

form 表单在网页中主要负责数据采集功能，属于一个容器标记。

表单组成

一个表单由 form元素、表单控件 和 表单按钮 组成。

（1） form元素

form元素用来创建表单，语法格式如下：

<form action="" method="" name="" enctype="">...
</form>

action：属性用于指定接收并处理表单数据的服务器程序的URL地址

enctype：设置编码类型

name：属性用于指定表单的名称，以区分同一个页面中的多个表单

method：设置表单的提交方式（主要有post和get）

使用 GET 方法提交，通过 URL 提交数据，数据在 URL 中可以看到，所以，敏感信息不能使用 GET 方法提交；而且，GET 方式提交的数据大小有限制（因为浏览器对 URL 的长度有限制）；

使用 POST 方法提交，与 GET 方法不同，数据放在HTTP包的body中且对提交的数据大小没有限制。

（2） 表单控件

表单控件包含了具体的表单功能项，主要用来收集用户数据，包括 label(标签)、input、textarea、select、datalist、keygen 等，还有对组件分组显示的 fieldset 和 legend 控件。

根据功能的不同，input 又可以分为 text、password、radio、checkbox、file、submit、reset、search、tel、url、email、number、range、color、Date Pickers 等类型。

（3）表单按钮

包括普通按钮、提交按钮(submit)和重置按钮(reset)。

表单控件

input 标签

input 标签输入类型是由类型属性 type 定义的。

基本语法：

<form><input name="控件名称" type="控件类型"/>
</form>

<input />标记为单标记，type 属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。

<input />标记属性特点：

  • value可以设置默认值
  • 实现单选功能，需要设置name的值相同
  • 当type类型选择file类型时　可以设置属性指定某种特殊类型
  • accetp 用于指定类型
  • multiple 允许多选
  • readonly 只读，不能修改
  • checked 默认选中
  • disabled 禁止操作

文本框 `

type=“text”`

<input type="text" name="username" value="admin"  maxlength="10">

在这里插入图片描述

只读文本框

值为只读，无法修改。

默认值：<input type="text" value="只读文本无法修改" readonly>

在这里插入图片描述

密码框 type="password"

注意：密码框字符不会明文显示，而是以星号或圆点替代。

<input type="password" name="passwd"  value="123">

在这里插入图片描述

单选框 type="radio"

<!--实现单选时，name要一样  -->
<input type="radio" name="gender"  value="0" checked> 男
<input type="radio" name="gender" value="1">女

在这里插入图片描述

复选框 type="checkbox"

<input type="checkbox"  name="sx">数学
<input type="checkbox" name="yw">语文
<input type="checkbox" name="wl" checked>物理
<input type="checkbox" name="yy" checked disabled >英语

在这里插入图片描述

选择文件上传 type="text"

当 type 类型选择 file 类型时　可以设置属性指定某种特殊类型。

<!-- accept 用于指定图片的类型multiple 允许多选
-->
上传文件：<input type="file" name="file" multiple accept="image/*">

在这里插入图片描述

隐藏框 type="hidden"

有的时候，部分数据并不需要用户直接输入，而是系统自动生成或者是默认的值，可以将 input 隐藏，当击提交时，和表单数据一起提交到服务器。

<!--hidden 设置input标签隐藏-->
隐藏数据: <input type="hidden" value="一起上传的数据">

在这里插入图片描述

提交按钮 type="submit"

点击提交按钮会将表单提交。

<input type="submit" value="提交">

在这里插入图片描述

重置按钮 type="reset"

点击重置按钮会将表单中的数据初始化，即清空输入的数据。

<input type="reset" value="清空">

在这里插入图片描述

普通按钮 type="button"

普通按钮是没有任何功能的按钮，必须设置value属性才会有内容。

<input type="button" value="确定">

在这里插入图片描述

文本区域 textarea

如果需要输入大量的信息，就需要用到 textarea 标记。

通过 textarea 控件定义多行文本输入控件，可以轻松地创建多行文本输入框，文本区可以容纳无限数量的文本，可以通过 cols（列数）和 rows（行数）属性来确定 textarea 的尺寸。

<textarea name="" id="" cols="30" rows="10" placeholder="请输入一段文字" maxlength="20">
</textarea>

在这里插入图片描述

设置了 maxlength="20" ，超过20字则无法输入。

label 标签

该标签为inout元素定义标注。

label标签通常和radio或者checkbox元素关联，可以实现点击文字也能选择/取消checkbox或者radio。

示例：

通过label的for属性和checkbox或者radio每个选项的id属性关联起来。

    label标签：<input type="checkbox" name="hobby" value="2" id="A"><label for="A">黄金糕</label><input type="checkbox" name="hobby" value="3" id="B"><label for="B">龙须面</label><input type="checkbox" name="hobby" value="4" id="C"><label for="C">北京烤鸭</label><input type="checkbox" name="hobby" value="1" id="D" checked ><label for="D">刀削面</label>

在这里插入图片描述

这样，就实现了点击文字可以取消或者选中checkbox的选项了。

分组标签 —— fieldset 和 legend

filedset元素可以将表单内的相关元素分组；
legend标签为fieldset元素定义标题。

示例：

fileset和legend：
<fieldset><legend>分组：</legend>分组1：<input type="text">分组2：<input type="text">
</fieldset>

在这里插入图片描述

下拉列表 —— select 标签

在HTML中，使用 select 控件实现下拉菜单。

select标签可以包含option标签和optgroup标签，optgroup标签实现了option的分组，使用label来显示分组的名称。

对option添加select属性，可以实现默认选中该选项。

<select ><optgroup label="主食"><option value="a">狮子头</option><option value="b">螺蛳粉</option></optgroup><option value="c">双皮奶</option><option value="d">蚵仔煎</option>
</select>

在这里插入图片描述


http://chatgpt.dhexx.cn/article/MuCw6u8r.shtml

相关文章

html表单制作选择,html表单(html表单制作及实例)

html表单制作选择,html表单(html表单制作及实例)

html表单 HTML表单用于收集不同类型的用户输入。HTML5Input具有多种新的表单输入类型&#xff0c;可提供更好的输入控制和验证。 html表单制作及实例 表格标签&#xff1a;表格 表单标签的主要功能是在HTML页面中创建表单&#xff0c;并在用户填写表单信息后将数据提交到服务器…
阅读更多...
HTML基础之form表单

HTML基础之form表单

目录 一&#xff1a;表单属性 1 name 属性 2 action属性 3 method属性 4 target属性 5 enctype属性 二&#xff1a;表单对象 1 input标签 2 多行文本textarea 3 下拉列表select 4 表单控件&#xff08;元素&#xff09;button 5 表单控件&#xff08;元素&#xff…
阅读更多...
html表单最全详解，初学必看

html表单最全详解，初学必看

大家去面试&#xff0c;去开户都要填各式各样的表单&#xff0c;填好之后给工作人员&#xff0c;他们会按照表单项目与你填的内容来帮你完成业务。 同样的&#xff0c;在互联网冲浪也需要填各种各样的表单&#xff0c;比如用户问卷调查&#xff0c;新注册账号等。那么我们填好的…
阅读更多...
HTML中的表单

HTML中的表单

一、网页中为什么需要表单 表单是为了收集用户信息(与用户进行交互&#xff0c;收集用户资料) 表单就是你在打王者时弹出的实名认证 二、表单的组成 在HTML标签中&#xff0c;一个完整的表单一般由表单域、表单控件(表单元素)和提示信息3个部分组成。 注:接着拿王者荣耀的实…
阅读更多...
html 表单

html 表单

input类型 用户框&#xff1a; // input 默认是text maxlength 表示可输入的最大字符数 // size 表示表单的初始元素 name 表示表单元素的名称 value 表示初始值&#xff08;type值为radio 必须指定一个值&#xff09; 密码框&#xff1a; //密码框 类型为password 密码框…
阅读更多...
HTML---表单详解

HTML---表单详解

目录 一、表单介绍 二、表单元素 1&#xff1a;input输入表单元素 &#xff08;1&#xff09; text和password &#xff08;2&#xff09;radio和checkbox &#xff08;3&#xff09;button 2&#xff1a;label标签 3&#xff1a;select下拉表单元素 4&#xff1a;textar…
阅读更多...
HTML --- 表单

HTML --- 表单

目 录 1.表单的用途 2.表单的工作原理 3.表单中的各种标签 表单标签 form 输入标签 input 文本文框标签 textarea 下拉框标签 select 按钮标签 button 4.表单实例 1.表单的用途 表单在网页上用来 给访问者填写信息 的&#xff0c;从而获得用户信息&#xff0c;使用网…
阅读更多...
Html的表单

Html的表单

目录 一、表单基础内容&#xff1a; 表单示例1&#xff1a; 表单示例2&#xff1a; 二、下拉列表和fieldset的使用 表单示例三&#xff1a; 表单示例四&#xff1a; 一、表单基础内容&#xff1a; 表单一般使用form标签包裹&#xff0c;其中&#xff1a; action"url…
阅读更多...
java中css js是什么_js、jsp、css都是什么意思？

java中css js是什么_js、jsp、css都是什么意思？

js、jsp、css都是什么&#xff1f;下面本篇文章就来给大家简单介绍一下js、jsp、css。有一定的参考价值&#xff0c;有需要的朋友可以参考一下&#xff0c;希望对大家有所帮助。 js是什么意思&#xff1f; js全称Javascript&#xff0c;是一种高级的、解释型、直译式脚本语言&a…
阅读更多...
css画圆和三角

css画圆和三角

1. css画园 代码&#xff1a; .circle {width: 100px;height: 100px;background: #C6E2FF;border-radius: 50px; }效果&#xff1a; 2. css画三角 代码&#xff1a; .triangle {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transp…
阅读更多...
HTML+CSS画圆、半圆、扇形、三角形

HTML+CSS画圆、半圆、扇形、三角形

使用border-radius&#xff1a;____px代码实现圆&#xff0c;半圆&#xff0c;扇形&#xff0c;三角形 1、圆 html中设定一个盒子 css中盒子样式 代码实现图 2、半圆 html中设定一个盒子 css中盒子样式 代码实现效果图 3、扇形 html中设定一个盒子 css中盒子样式 代码实现效…
阅读更多...
以下css属性可以用来画圆的是,css3 如何画圆

以下css属性可以用来画圆的是,css3 如何画圆

css3画圆的实现方法&#xff1a;首先创建一个HTML示例文件&#xff1b;然后定义一个div&#xff0c;并命名为“circle”&#xff1b;最后通过css属性“border-radius”使div实现圆的效果即可。 本教程操作环境&#xff1a;Dell G3电脑、Windows7系统、HTML5&&CSS3版本。…
阅读更多...
【css】用css画圆，半圆和三角形

【css】用css画圆，半圆和三角形

用css画圆&#xff0c;半圆和三角形 圆&#xff0c;半圆三角形 圆&#xff0c;半圆 // 圆 宽高相等&#xff0c; border-radius大于宽度的一半 .circle{width: 100px;height: 100px;background: red;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px…
阅读更多...
使用CSS画圆

使用CSS画圆

如何使用CSS画圆&#xff1f; <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <title>Title</title> <style .circle{width:100px;height:100px;background-color:#f00;border-radius:50%;-moz-b…
阅读更多...
如何用CSS画圆 以及添加阴影

如何用CSS画圆 以及添加阴影

圆形的画法&#xff1a; 先画一个矩形&#xff0c;然后添加 border-radius属性&#xff0c;设置值为正方形的一半。 #content{width: 200px;height: 200px;border-radius: 100px;box-shadow:20px 20px 30px gray;background-color: pink;position: relative;left: 100px;top:10…
阅读更多...
CSS画圆和三角形

CSS画圆和三角形

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>CSS画图形</title><style>#circle{width: 200px;height: 200px;background-color: grey;border-radius: 100px;}#half-circle{width: 200p…
阅读更多...
用CSS画圆和三角形

用CSS画圆和三角形

圆形的原理不必多说&#xff0c;三角形的原理是使用border&#xff0c;border呈扇形向外展开&#xff0c;当width为0时&#xff0c;就是三角形&#xff0c;可以给四个方向的border设置不同的颜色&#xff0c;查看效果图就能一目了然。 <!DOCTYPE html> <html lang&qu…
阅读更多...
CSS画圆、三角形、品字、骰子

CSS画圆、三角形、品字、骰子

CSS画圆、三角形、品字、骰子 前言&#xff1a;这篇文章主要是本人正在看面试题&#xff0c;面试题当成八股文来背&#xff0c;太难了。所以&#xff0c;通过写笔记&#xff0c;并自己实践来加深印象。如果这篇文章对你有帮助&#xff0c;请不要吝啬你的赞。 圆 让 border-rad…
阅读更多...
CSS画圆实现代码

CSS画圆实现代码

主要是css圆的样式定义的问题&#xff0c;解决好后就能画出来了 <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>Document</title><style>.circle{width: 100px;height: 100px;border-radius: 50px;border: …
阅读更多...
用CSS画圆、半圆、线性箭头

用CSS画圆、半圆、线性箭头

一、css画半圆 border-radius 可以设置盒子四边的弧度。可以设置%&#xff0c;px等单位。 在css中利用border-radius可以画出圆形&#xff0c;半圆&#xff0c;等图案 半圆需要两个块元素&#xff0c;两个块元素分别设置一个对应的角即可。 <style>.a{width: 200px;he…
阅读更多...
推荐文章

Copyright @ 2022~2023