HTML（表单元素）

最新推荐文章于 2024-04-23 02:00:49 发布
最新推荐文章于 2024-04-23 02:00:49 发布
阅读量69 收藏
点赞数
分类专栏： 前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lolhahahaha/article/details/115800629
版权

HTML表单元素

  1. 文本框
    input type="text 表示文本框
    并且只能输入一行
    如果要输入多行则要输入多行使用文本域textarea
    注： 标签很特别，一般是不需要写成或者 这样的。
    并且 这样的写法也是满足标准的
    （1）文本框
<input type="text">

（2）设置属性size

<input type="text" size="10">

（3）有初始值的文本框

<input type="text" value="有初始值的文本框">

效果：
在这里插入图片描述

（4）有背景文字的文本框

<input type="text" placeholder="请输入账号">

效果：
在这里插入图片描述

  1. 密码框
<input type="password">
  1. 表单form
    用于向服务器提交数据，比如账号和密码
    （1）表单
<form action="https://how2j.cn/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>

效果：
在这里插入图片描述
（2）method
一、method=“get” ，这是常用的数据提交方式
如果在form里没有提供method属性，则默认的是get方式提交数据
get方式的一个特点就是，可以在浏览器的地址栏看到提交的参数，即便是密码也看得到

<form method="get" action="https://how2j.cn/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
双击选中所有代码

二、method = “post”
不会在地址栏显示提交数据的参数；
如果要提交二进制数据，比如上传文件，必须采用post方式

<form method="post" action="https://how2j.cn/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>

（3）post，get方式的区别
get
是form默认的提交方式如果通过一个超链访问某个地址，是get方式如果在地址栏直接输入某个地址，是get方式提交数据会在浏览器显示不可以用于提交二进制数据，比如上传文件
post
必须在form上通过 method=“post” 显示指定提交数据不会在浏览器显示出来可以用于提交二进制数据，比如上传文件

  1. 单选框
    （1）普通单选
单选1 <input type="radio" >
单选2 <input type="radio" >

效果：
在这里插入图片描述
（2）默认选中

默认选中 <input type="radio" checked="checked" >

（3）分组
多个单选框分到同一个组中，同一时间，只能选择一个单选框；只需要将name属性设置成相同的即可

<p>今天晚上做什么？</p>
 
学习java<input type="radio" name="activity" value="学习java" > <br/>
东京热<input type="radio" checked="checked"  name="activity" value="tokyohot" > <br/>
dota<input type="radio" name="activity" value="dota" > <br/>
LOL<input type="radio" name="activity"  value="lol"> <br/>
  1. 复选框checkbox
<p>今天晚上做什么？</p>
  
学习java<input type="checkbox" value="学习java" > <br/>
东京热<input type="checkbox" checked="checked"  name="activity" value="tokyohot" > <br/>
dota<input type="checkbox" value="dota" > <br/>
LOL<input type="checkbox" value="lol"> <br/>

效果：
在这里插入图片描述

  1. 下拉表select
    配合option使用
    （1）普通下拉表
<select >
 <option >苍老师</option>
 <option >高树玛利亚</option>
 <option >遥美</option>
</select>

效果：
在这里插入图片描述
（2）设置高度

<select  size="2">
 <option >苍老师</option>
 <option >高树玛利亚</option>
 <option >遥美</option>
</select>

效果：
在这里插入图片描述

（3）设置多选
使用ctrl 或者shift可以多选

<select size="3" multiple="multiple">
 <option >苍老师</option>
 <option >高树玛利亚</option>
 <option >遥美</option>
</select>

效果：
在这里插入图片描述
（4）默认选择
select = “selected”

<select size="3" multiple="multiple">
 <option >苍老师</option>
 <option selected="selected">高树玛利亚</option>
 <option selected="selected">遥美</option>
</select>
  1. 文本域textarea
    文本域可以有多行，并且可以有滚动条
    (1)文本域
<textarea>
abc
def
</textarea>

（2）定义宽度和行数

<textarea cols="30" rows="8">123456789012345678901234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890</textarea>
  1. 按钮button
<input type="button" value="一个按钮">

效果：
在这里插入图片描述

普通的按钮是不具备提交form的效果的

普通按钮不能提交
~~<form action="/study/login.jsp" method="get">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="button" value="登陆">
</form>~~
  1. 提交按钮submit
<form action="/study/login.jsp" method="get">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>

效果：
在这里插入图片描述

  1. 重置按钮reset
<form action="/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>

效果：
在这里插入图片描述

  1. 图像提交
<form action="/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="image" src="https://how2j.cn/example.gif">
</form>

需要用到jsp
在这里插入图片描述

  1. 按钮标签/button
    标签功能更为丰富
    按钮标签里的内容可以是文字也可以是图像
    如果button的type=“submit” ，那么它就具备提交form的功能
    （1）文字按键
<button>按钮</button>

（2）图片按钮

<button><img src="https://how2j.cn/example.gif"/></button>

（3）提交数据
设置type=“submit”
IE下button的type的默认值为button不具备提交功能
其他浏览器type的默认值是submit

<form action="/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
 
<button type="submit">登陆</button>
 
</form>
new一个对象()
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5创建对象的方法,JS创建对象（3种方式）
weixin_33484805的博客
06-21 587
在 JavaScript 中创建对象的方式有 3 种，简单介绍如下。构造对象使用 new 运算符调用构造函数，可以构造一个实例对象。具体用法如下：var objectName = new functionName(args);参数说明如下：objectName：返回的实例对象。functionName：构造函数，与普通函数基本相同，但是不需要 return 返回值，返回实例对象，在函数内可以使用 ...
关于html的表单元素详解(一)
09-28
主要介绍了关于html的表单元素，文中讲解了Action 属性Method 属性-下拉列表：< select > 元素-按钮：< button> 元素等，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
HTML表单元素学习-公开课.pptx
07-07
HTML网页设计课件、HTML网页设计教案，HTML网页设计教学计划，HTML网页设计实训指导书，HTML+CSS实战
HTML Form表单元素全面了解
09-28
下面小编就为大家带来一篇HTML Form表单元素全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML5 表单元素
12-13
HTML5 表单元素 HTML5 新的表单元素 HTML5 有以下新的表单元素: 注意:不是所有的浏览器都支持HTML5 新的表单元素，但是你可以在使用它们，即使浏览器不支持表单属性，仍然可以显示为常规的表单元素。 HTML5 元素 元素规定输入域的选项列表。 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项： 使用 元素的列表属性与 元素绑定. 实例 元素使用预定义值:     HTML5 元素 元素的作用是提供一种验证用户的可靠方法。 标签规定用于表单的密钥对生成器字段。 当提交表单时，会生成两个键，一个
关于html的表单元素详解（二）
09-28
主要介绍了关于html的表单元素，通过介绍value 属性，readonly 属性，disabled 属性，size 属性，maxlength 属性，width 属性等详细解释了表单元素的组成和应用，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
HTML(结构)
lolhahahaha的博客
04-17 150
HTML结构 <标签> 一个HTML文件是由一套标签组成，例如在下面的代码中就是一对开始标签和结束标签，而标签之间的文本Hello World就是内容。 <html> <body> <p>**Hello World**</p> </body> </html> <元素> 而一个完整的HTML文件必须要包含元素和元素。 然而在实际的开发中即使你写出了不完整的元素（比如下面这个程序），程序也不会
html页面创建对象,javascript创建html dom对象的四种方法
weixin_30277297的博客
06-04 983
javascript创建html dom对象的四种方法1.使用new关键字创建对象var obj = new Object();//new关键字创建对象obj.name="Bill";obj.age=65;obj.eyecolor="blue";document.write("姓名："+obj.name+"年龄："+obj.age+"眼睛色泽："+obj.eyecolor);2.使用字面量创建对象...
html怎么创建对象,如何创建javascript对象？
weixin_42395135的博客
06-26 789
javascript是一种“基于prototype的面向对象语言”，与java有非常大的区别，无法通过类来创建对象。那么，既然是面象对象的，如何来创建对象呢？JavaScript中创建对象的方法如下：一：使用new关键字调用构造器创建对象；在JavaScript中，所有的函数名可以看成一个类名；函数名和其参数可以看成一个构造器用于构造对象；使用构造函数模式创建对象的几点注意事项：(1)：没有明显的...
HTML(基本元素2)
lolhahahaha的博客
04-17 74
HTML基本元素2 图像 图像标签 (1)插入图像 <img src="https://how2j.cn/example.gif"/> (2)本地图像-同级目录 只需要把图片保存在同一个目录下即可 src直接引用文件名 <img src="example.gif"/> (3)本地图像-上级目录 只需要在文件名前加上…/即可 同理上上级则加上…/…/ <img src="../example.gif"/> (4)其他目录图像 需要使用绝对路径 <img s
html 创建数组和对象,javascript – 循环遍历一个对象数组并创建一个新对象
weixin_39654245的博客
06-15 577
我有一个对象数组,每个对象都有一个标题,内容和contentHTML.我想映射这个数组并创建一个新对象.新对象将获取title属性的值,并将其用作每个content和contentHTML属性的父属性.下面的代码似乎只是获取数组中的最后一个对象.结果是：{"sidebar": {"text": "Some sidbar text here","content": "Some sidebar tex...
HTML表单元素-输入框
热门推荐
前端队长Daotin
11-06 1万+
2、表单元素-输入框输入框使用input标签。<input>标签，根据type属性的不同，会有不同的表现样式。默认type="text"，也就是文本输入框。2.1、文本输入框单行的文本区域，（输入中的换行会被自动去除）。<input type="text" name="username" maxlength="6" readonly="readonly" ...
HTML中详述JavaScript对象创建方式
m0_46383618的博客
07-16 143
对象：在JavaScript中，对象是拥有属性和方法的数据。 JavaScript自定义对象方式有以下7种：直接创建方式、对象初始化器方式、构造函数方法、prototype原型方式、混合的构造函数/原型方式、动态原型方式和工厂模式。 这里为大家讲解常用的5种：直接创建式，初始化式，构造方法式，原型式和混合式。 直接创建式 直接创建式 创建语法： var 对象变量名 = new Object(); 对象变量名. property1 = value1; …; 对象变量名. propertyN = valu
html怎么新建js,js创建HTML对象和元素
weixin_32752827的博客
06-03 246
第一种模式：工厂方式var lev=function(){return "啊打";};function Parent(){var Child = new Object(); //或者var Child=newObject;Child.name="李小龙";Child.age="30";Child.lev=lev;Child.showColor2=showColor; Child....
HTML-JavaScript对象及初识面向对象
南劲竹的博客
09-16 743
对象是什么 对象是包含相关属性和方法的集合体（属性）（方法） 什么是面向对象 1.面向对象仅仅是一个概念或者编程思想 2.通过一种叫做原型的方式来实现面向对象编程 JavaScript中的基本数据类型： number（数值类型） string（字符串类型） boolean(布尔类型) null(空类型)    【判断后的值是object】 undefined(未定义类型) ...
html5创建对象的三种方式
TimyChen的博客
01-04 1574
创建对象有很多种方法，最常用的有直接创建对象、使用对象字面量、为对象添加方法等。 直接创建对象： example var myData=new Object(); myData.name="Marry"; myData.feel="love"; document.writeln("hello "+myData.name+"."); document.w
html制作小常识
new对象
03-17 82
<pre> 原样输出 资源定位标签，可实现回到设置的位置 <a name="top"></a> <a href="#top">回到顶部</a> alt 可在图片上显示文字 <caption></caption>可以用来给表添加标题 合并单元格： rowspan：跨行（在td中添加） col...
Web前端开发之HTML_3
最新发布
zx1026409886的博客
04-23 902
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
HTML中的页面可见性
小卡酷谋的博客
04-22 377
所以，所谓页面可见性，就是获取当前页面的可见状态。因为对于用户来讲可以打开好多标签页面来回切换，然而始终只有一个页面处于显示状态。所以我们可以通过页面可见性（Page Visibility）API 来判断当前页面是显示状态还是隐藏状态。页面事件来判断当前页面可见性的状态，并针对性的执行某些任务。长期以来一直缺少一个判断用户是否正在浏览某个指定标签页的方法。里页面可见性接口就提供给了程序员一个方法，让他们使用。用户是否去看别的网站了？更多有关页面可见性的内容可以参阅。"页面切换了~目前不可见"
html写一个注册页面，要求尽可能应用多种html表单元素，要求不使用css、js、框架
04-22
这个示例中包含了以下HTML表单元素: 输入框(input)、密码框(input type="password")、单选框(input type="radio")、颜色选择器(input type="color")、下拉菜单(select)、文本域(textarea)、文件上传(input type=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值