HTML基础之form表单

article/2025/1/16 7:56:34

目录

一:表单属性

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://chatgpt.dhexx.cn/article/9c2v1AC7.shtml

相关文章

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

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

HTML中的表单

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

html 表单

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

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 --- 表单

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

Html的表单

目录 一、表单基础内容&#xff1a; 表单示例1&#xff1a; 表单示例2&#xff1a; 二、下拉列表和fieldset的使用 表单示例三&#xff1a; 表单示例四&#xff1a; 一、表单基础内容&#xff1a; 表单一般使用form标签包裹&#xff0c;其中&#xff1a; action"url…

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

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

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画圆、半圆、扇形、三角形

使用border-radius&#xff1a;____px代码实现圆&#xff0c;半圆&#xff0c;扇形&#xff0c;三角形 1、圆 html中设定一个盒子 css中盒子样式 代码实现图 2、半圆 html中设定一个盒子 css中盒子样式 代码实现效果图 3、扇形 html中设定一个盒子 css中盒子样式 代码实现效…

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

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

【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画圆&#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画圆 以及添加阴影

圆形的画法&#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画圆和三角形

<!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画圆和三角形

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

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

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

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

css画圆教程

目录 一、border-radius1.作用2.使用语法 二、border-color 本文章主要讲解css的border-radius&#xff0c;border-color两个属性&#xff0c;利用它们就可以画出你想要的图形。 一、border-radius 1.作用 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一…

用css画圆

用css完成一个实心圆形。要求圆形有边框、背景色&#xff0c;边框的宽度为10px、颜色为红色、边框样式为实心。背景色为蓝色。 background-color: blue;width: 100px;height: 100px;border-radius: 50%;border: 10px solid red;用css实现颜色渐变效果 background: radial-grad…