HTML输入类型（input元素）

最新推荐文章于 2024-04-30 17:59:49 发布
最新推荐文章于 2024-04-30 17:59:49 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： 前端HTML 文章标签： web开发 前端 html class

1、text元素

见前前章

2、password元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
user name:<br/>
<input type="text" name="username">
<br/>
password:
<br/>
<input type="password" name="psd">
<br/>
</form>
</body>
</html>

结果：


3、submit元素

见前前章

4、radio元素 

见前前章

5、checkbox元素定于复选框

允许客户在有限数量的选项中选择零个或者多个选项

<!DOCTYPE html>                                
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://www.baidu.com">
<input type="checkbox" name="vehicle" value="bike">i have a bike
<br/>
<input type="checkbox" name="vehicle" value="car">i have a car
<br/>
</form>
</body>
</html>

结果


对比与selection

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://www.baidu.com">
<select name="colors">
<option value="red">red</option>
<option value="red" selected>blue</option>
<option value="red">green</option>
<option value="red">black</option>
</select>
<br/>
<br/>
<input type="submit" value="submit">
</form>
</body>
</html>

结果：


6、button元素

见前章



HTML5 输入类型

HTML5 增加了多个新的输入类型：

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

7、number元素

用于包含数字值的输入字段，限制可应用到的数字字段

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
quantity(between 1 and 5)
<input type="number" name="quantity" min="1" max="100" step="10" value="20">
</form>
</body>
</html>


属性 描述
disabled 规定输入字段应该被禁用。
max 规定输入字段的最大值。
maxlength 规定输入字段的最大字符数。
min 规定输入字段的最小值。
pattern 规定通过其检查输入值的正则表达式。
readonly 规定输入字段为只读（无法修改）。
required 规定输入字段是必需的（必需填写）。
size 规定输入字段的宽度（以字符计）。
step 规定输入字段的合法数字间隔。
value 规定输入字段的默认值。

8、

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://www.baidu.com" method="get">
quantity(between 1 and 5)
<input type="number" name="quantity" min="1" max="100" step="10" value="20">
<br/>
birthday:<br/>
enter a date before 2017-10-31:<br/>
<input type="date" name="bday" max="2017-10-30"><br/>            #date元素用于包含日期的输入字段
select your favorite color:<br/>
<input type="color" name="favcolor"><br/>                                        #color用于应该包含颜色的输入字段
points:<br/>
<input type="range" name="points" min="0" max="100">               #range字段包含一定范围内值的输入字段 输入字段能显示为滑动字块
<input type="submit"><br/>
birthday(month and year):<br/>
<input type="month" name="birthmonth"><br/>                                 #允许用户选择月份和年份
select a week:<br/>
<input type="week" name="week_year"><br/>                                 #允许用户选择周和年   
select a time:<br/>
<input type="time" name="user_time">                                               #允许用户选择时间无时区
<input type="submit"><br/>
birthday(day and time):<br/>
<input type="datetime" name="bdaytime">                                         #允许用户选择日期和时间有时区
<input type="submit"><br/>
birthday(day and time):<br/>
<input type="datetime-local" name="bdaytime">                                #允许用户选择日期和时间有时区
<input type="submit" value="send"><br/>
E-mail:<br/>
<input type="email" name="email">                                                      #用于包含电子邮件地址的输入字段 能够在提交时对邮件地址进行验证

<input type="submit"><br/>
search google:<br/>
<input type="search" name="search">                                                 #用于搜索字段
<input type="submit"><br/>
telephone:<br/>
<input type="tel" name="usertel">                                                          #用于应该包含电话号码的字段 目前只有safari支持tel类型
<input type="submit"><br/>
add your homepage:<br/>
<input type="url" name="userurl">                                                         #用于包含URL地址的输入字段 在提交时自动验证URL
<input type="submit"><br/>
</form>
</body>
</html>



gloria_chenjing
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
input元素的url类型和email类型简介
12-13
在过去我们制作网页输入框，会...设置此类型后，从外观上来看与普通的元素差不多，可是如果你将此类型放到表单中之后，当点击提交按钮，如果此输入框中输入的不是一个URL地址，将无法提交。 运行效果如下图： 2、Emai
禁止input文本框输入实现属性
12-10
今天想总结几个很有用的html标签，开发中经常用到，不熟悉的人可能还真不太...disabled表示禁用input元素，不可编辑，不可复制，不可选择，不能接收焦点,后台也不会接收到传值 复制代码代码如下: <input type=”t
HTML input type 输入类型
GarfieldEr007的专栏
11-26 3580
本章描述 元素的输入类型。 输入类型：text  定义供文本输入的单行输入字段： 实例 First name: Last name: 亲自试一试 以上 HTML 代码在浏览器中看上去是这样的： First name:   Last name: 输入类型：password  定义密码字段： 实例 Use
HTML入门：输入方式
ekxavol的博客
03-12 474
HTML用表单(form)来处理用户输入，基本语法为： <form> 请输入账户：<input type="text" name="account" value="默认值"><br> </form> 通过改变type类型，可以改变输入方式。如： type=“password”，表示以密码形式输入，文本会以星号键形式显示。 type=“checkbo...
HTML中input输入框（详解输入框的用法）
最新发布
百赢出品，必属精品
04-30 4777
input>元素是HTML表单中最常见的元素之一，用于收集用户的输入数据。它可以包含多种类型的输入，如文本、密码、数字等。通过指定不同的type属性，可以定义不同类型的输入字段。类型（type）属性定义输入字段的类型，如文本框、密码框、单选按钮、复选框等。常见类型包括textpasswordradiocheckboxfile等。名称（name）属性用于标识输入字段的名称，以便在表单提交时能够将数据传输到服务器。对于单选按钮和复选框，相同名称的一组按钮被视为一个组，只能选择其中的一个或多个。
input是什么元素
一杯咖啡
02-29 1499
HTML 输入类型
weixin_44664352的博客
09-13 198
输入类型：text <input type="text"> 定义供文本输入的单行输入字段： <form> First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname"> </form> 输入类型：password <input type="
表单
weixin_45746803的博客
10-31 151
\ 元素 HTML 表单用于收集用户输入。 元素定义 HTML 表单： 实例 . form elements . HTML 表单包含表单元素。 表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。 元素 元素是最重要的表单元素。 元素有很多形态，根据不同的 type 属性。 这是本章中使用的类型： 类型 描述 text 定义常规文本输入。 radio ...
HTML5&CSS3网页制作：Input元素的其他属性.pptx
05-31
Input元素的其他属性 Input元素的其他属性 01 autofocus属性 <input type="password" autofocus="true"/> 描述 autofocus属性用于指定页面加载后是否自动获取焦点，将标记的属性值指定为true时，表示页面加载完毕后...
HTML5&CSS3网页制作：Input元素的type属性.pptx
05-31
Input元素的type属性 Input元素 01 Input元素 普通文本框 密码文本框 按钮 Input元素 根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。 ...
Html5新增元素详解.pptx
11-15
Html5 中的新增 input 元素类型包括： * email 元素：用于输入电子邮件地址。 * url 元素：用于输入网址。 * search 元素：用于输入搜索关键字。 Html5 中的新增多媒体元素和交互性元素包括： * video 元素：用于...
HTML表单（属性/元素/输入类型/输入属性）：看这一篇就够了
Vec_Kun的博客
02-09 3022
autocomplete 属性适用于 以及如下 类型：text、search、url、tel、email、password、datepickers、range 以及 color。required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.formmethod 属性适用于 type="submit" 以及 type="image"。
前端初学者必看----html中几种常用输入框
热门推荐
clepsidra的博客
09-16 1万+
一般用户名 手机号等文本输入类 可用 input type=“text” 注册密码 支付密码等重要的需要安全性保障的 用 input type=“password” 需要重置性功能的按钮时 可以用 input type=“reset” value=“重新输入” 带有单选框功能的 选项功能 input type=“redio” name=“ral”(再有多个选框时 name属性需要输入相同的名词...
HTML基础学习第五篇（HTML表单与输入）
xiaomoge__的博客
09-14 1566
HTML表单的输入
前端面试之元素分类
JingDengLai的博客
06-30 373
元素分类 在web开发中，我们经常会用到HTML元素来写结构，用着用着就习惯了，但不一定了解元素分为几类，一般，元素分为块级元素，内联元素和内联块级元素等。 块级元素 块级元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<form> <header>、<footer>、<aside>、<nav>、&l
几种input的类型
weixin_46078926的博客
11-22 377
input的几种类型
html的输入累控件,html中输入控件的元素
weixin_27064845的博客
06-09 164
html中输入控件的元素有三种：1，input输入2，textarea 创建一个多行的输入框3，select和option 下拉框1.input中常用属性text文本框：password 密码:button 按钮：submit 提交：checkbox 复选框： checked是默认选择date 日期：number 数字：week 周：hidden 隐藏：reset 重置：file 上传文件：del...
HTML网页、元素、标签、常用的特殊字符、行内元素、块级元素、有序列表、无序列表、定义列表
Dreamer
07-24 722
HTML网页、元素、标签、常用的特殊字符 文章目录HTML网页、元素、标签、常用的特殊字符网页是由什么构成的HTML中的标签结构元素及元素的属性注释环境HTML标签HTML常用标签标签介绍图像标签相对路径绝对路径meta标签标签规则内联标签``超链接标签``案例其他标签特殊字符常用的特殊字符 网页是由什么构成的 ​ 网页是由HTML标签、CSS样式和JavaScript代码构成的，HTML是网页的源代码。 ​ 结构：HTML——超文本标记语言（除了文本之外还有图片、视频、音频等） ​ 样式：CSS ​ 动作
详细介绍一下HTML5的input元素
05-10
HTML5的input元素是用于在HTML表单中创建输入字段（input fields）的标签。它可以用于创建多种类型的输入字段，包括文本输入框、密码输入框、单选按钮、多选框、隐藏字段、提交按钮等等。 以下是HTML5的input元素的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值