【html学习笔记】3.表单元素

最新推荐文章于 2024-04-08 20:38:50 发布
最新推荐文章于 2024-04-08 20:38:50 发布
阅读量457 收藏 10
点赞数 9
分类专栏： HTML、CSS、JS学习笔记 文章标签： html 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/diguangxihua/article/details/136142119
版权

1.文本框

1.1 语法

<input type = "text">表示文本框。且只能写一行
在这里插入图片描述

1.2 属性

  1. 使用属性size 设置文本框大小
<input type="text" size="10">


2. 使用属性value 来设置文本框的默认文字

     <input type="text" size="30" value = "显示在文本框里的初始值">

在这里插入图片描述

  1. 使用属性placeholder来设置文本框的背景文字
       <input type="text" size="30" placeholder = "请输入账号">

在这里插入图片描述

2.密码框

表示方法：

<input type="password">

使用密码框时会自动将输入的内容转换为星号
在这里插入图片描述

3.表单

表单用于搜集不同类型的用户输入。
表单的表示方式是<form>
表单用于向服务器提交数据，比如用户名和密码等。

表示将数据提交到服务端的login.jsp里面了

<form action="login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>

在这里插入图片描述

提交数据的方式

<form>中提交数据的属性有两种，一种是 method=“get” ，一种是method=“post”

  • method=“get”
    是默认的提交表单数据的方式。如果没有指定的话一般采用这种
    get方式可以在地址栏中看到提交的数据。即使是密码也可以看到
<form method="get" action="login.jsp">

在这里插入图片描述

  • method=“post”
    post提交表单需要指定
    而且使用 post提交表单时不会显示出密码
<form method="post" action="login.jsp">

在这里插入图片描述

4.单选框

<input type = "radio">表示单选框

<html>
  <body>
  	星期一<input type = "radio">
	星期二<input type = "radio">  
  	星期三<input type = "radio">
	星期四<input type = "radio">  
  	星期五<input type = "radio">
	星期六<input type = "radio">  
	星期日<input type = "radio">  
</body> 
</html>

在这里插入图片描述

默认选中

默认选中，需要增加属性checked=“checked” 选项

 	星期一<input type = "radio" checked="checked" >
 	星期二<input type = "radio">  
  	星期三<input type = "radio">
	星期四<input type = "radio">  
  	星期五<input type = "radio">
	星期六<input type = "radio">  
	星期日<input type = "radio">

在这里插入图片描述

一堆中只能选中一个

单选框一次能选中好几个选项，如果想要在一堆单选框里只能选中一个的话，则需要进行分组。
分组需要增加一个属性name，表示一组数据即name属性相同。
此时就只能在name相同的属性里选择一个了。

<html>
  <body>
  	星期一<input type = "radio" name = "week" checked="checked" >
	星期二<input type = "radio" name = "week">  
  	星期三<input type = "radio" name = "week">
	星期四<input type = "radio" name = "week">  
  	星期五<input type = "radio" name = "week" >
	星期六<input type = "radio" name = "week">  
	星期日<input type = "radio" name = "week">  
</body> 
</html>

在这里插入图片描述

5.复选框

复选框用<input type= "checkbox">表示

  <body>
	<p>这个周哪几天需要上班？</p>
  	星期一<input type = "checkbox">
	星期二<input type = "checkbox" >  
  	星期三<input type = "checkbox" >
	星期四<input type = "checkbox" >  
  	星期五<input type = "checkbox" >
	星期六<input type = "checkbox" >  
	星期日<input type = "checkbox" >  
</body>

在这里插入图片描述

6 下拉列表

在HTML中，下拉列表需要<select><option>两者配合使用

         <select>
  	<option>星期一</option>
	<option>星期二</option>  
  	<option>星期三</option>
	<option>星期四</option>  
  	<option>星期五</option>
	<option>星期六</option>  
	<option>星期日</option>
         </select>

在这里插入图片描述

设置下拉列表的高度

在select后增加属性size
<select size = "7" ><size>
在这里插入图片描述

设置下拉列表可以多选

需要使用键盘上的shift键

在select后增加属性multiple
<select size = "7" multiple = "multiple"><size>
在这里插入图片描述

7.文本域

文本域用<textarea>表示
与文本框不同的是，文本域可以显示多行数据。
在这里插入图片描述

指定长度和宽度

<textarea>增加属性cols和rows

<html>
  <body>
         <textarea cols = "30" , rows = "7">
  	星期一
	星期二  
  	星期三
	星期四  
  	星期五
	星期六  
	星期日
         </textarea>
</body> 
</html>

在这里插入图片描述

8.普通按钮

普通按钮的表示方式是<input type="button">
普通按钮不能提交表单

         <input type="button" value = "普通按钮">

在这里插入图片描述

9.提交按钮

<input type = "submit">是提交按钮。可以把数据提交到服务器

<form method="get" action="login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>

在这里插入图片描述

10.重置按钮

<input type = "reset">是重置按钮。可以把文本框里的内容清空

<form method="get" action="login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
<input type="reset" value="重置">
</form>

在这里插入图片描述

11.图像提交

<input type="image" > 是使用图像作为提交的表示方式

<input type="image" src="picture.jpg">

在这里插入图片描述
在这里插入图片描述

12 按钮

<button></button>是按钮标签
按钮标签中可以是图片，也可以是文字。
在按钮标签中添加属性type=“submit，那么按钮也具有提交表单的功能

button中是文字

<button>登陆</button>

在这里插入图片描述

button 的图片属性

<button>
	<img src="picture.jpg"/>登陆
</button>

在这里插入图片描述

button的type属性

<form method="get" action="login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<button type="submit">登陆</button>
</form>

在这里插入图片描述

日光倾
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5简介的文本框,HTML5实战与剖析之表单——文本框脚本
weixin_35879989的博客
06-10 1143
文本框类型在编写表单相关的东西的时候，通常有两个标签标示文本框：一种是单行文本框input标签，另一种是多行文本框textarea标签。这两种标签比较相似，但是他们也有区别。如果一定要用input标签标示文本框，那么就必须在type属性中设置”text”。通过设置size属性可以指定文本框中显示字数的字符数。通过value属性，可以设置文本框的默认文字。通过maxlength属性可以指定文本框的最...
动态增加html表单（文本框）
01-18
一个HTML页面和一个JS，可自己转为Asp或asp.net页面应用于实际
html表单文本框作用,HTML表单的用法
weixin_29593445的博客
06-03 528
在 HTML 中，表单是由 标记定界的区域，包含文本输入框、按钮、复选框和图形用户界面的其他功能部件。Web 应用程序使用表单以允许最终用户提供要发送到服务器的数据。form元素常用属性：action：提交表单的地址method：提交表单使用的方法，一般有get和post两种。input元素input元素通过type属性来设置不同的input类型。文本域姓名：密码域密码：复选checked为默认...
前端HTML入门基础5（表单）
最新发布
qq_51752841的博客
04-08 701
在HTML中，表单（Forms）是一种允许用户与网页交互的界面元素，常用于收集用户输入、提交数据到服务器等。此外，随着HTML5的发展，在上面的示例中，我们创建了一个简单的登录表单，包括用户名和密码输入框以及一个提交按钮。显而易见就是能隐藏起来的看不见的，一般用于防止恶意书写脚本批量的执行一些功能。在HTML中通常用于收集用户较长的文本输入，如留言、评论或者是文章内容等。正确设计和实现HTML表单对于确保良好的用户体验和数据的准确收集至关重要。fieldset和legend是HTML中用于创建表单的标签。
html多行文本框option,html表单
weixin_39759589的博客
06-03 704
1.语法:表单元素表单本身不可见表单元素有文本域，单选框，复选框，按钮，列表等form标签中，以下标签实现单元素添加表单输入标签下拉菜单，列表标签下拉菜单，列表项目标签文字域标签下拉菜单，列表项目分组标签标签单标记语法:type属性:text 文字域password密码域file文件域checkbox复选框radio单选框button按钮submit提交按钮reset重置按钮hidden隐藏域i...
HTML-表单中的文本框新属性
qq_48222936的博客
03-27 558
input常用属性
HTML学习笔记（五）——表单
01-08
HTML5 通过引入新的表单元素、输入类型和属性，以及内置的对必填字段、电子邮件地址、URL 以及定制模式的验证，让这一切变得很轻松。 表单的建立 在HTML中，只要在需要使用表单的地方插入成对的标记form，就可以很...
HTML10笔记.pdf
12-01
常用的表单元素包括： * 文本输入框：input type="text" * 密码输入框：input type="password" * 单选框：input type="radio" * 复选框：input type="checkbox" * 下拉菜单：select * 文本域：textarea HTML10图片...
Bootstrap简单表单显示学习笔记
11-28
3、向所有的文本元素<input>、<textarea>和<select>添加.form-control <!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta charset="utf-8...
2023年JavaWeb学习笔记.docx
11-05
Java Web学习笔记 Java Web学习笔记是Java Web开发的入门级教程，旨在帮助读者快速掌握Java Web开发的基本概念和技术。本笔记涵盖了Java Web开发的基本概念、Servlet、JSP等核心技术，并对Java Web项目目录结构、...
HTML表单（form、input、select、textarea标签）
拾Miss~博客
03-13 5291
目录 HTML表单 下拉菜单/列表 ***HTML表单** ***<input>标签** <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&g...
html input标签 单行文本框 多行文本框
qq_42265536的博客
12-22 11万+
input type属性 text 单行文本框 passworld 密码文本框 button 按钮 reset 重置按钮 image 图像形式的提交按钮 radio 单选按钮 checkbox 复选框 hidden 隐藏字段 file 文件上传 语法：    &lt;inp...
HTML文本框参考样式及常见操作技巧大全
thgj0006的博客
03-18 3831
在网页设计中，常常要使用 html 文本框来收集一些用户信息或是制作登录页，虽然只是简单的输入框，但是如果加入一些美化设计会使你的页面看起来更加有吸引力，下面就给大家提供了一些 html 文本框的参考样式和常见的 html 操作技巧，希望对你的网页制作有帮助。首先我们先看看一个最简单的文本框是如何实现的？W3Cschool文本输入框实例：如上实例所示，其实这个 html 文本框样式非常简单，用到了 css 的伪元素 focus。下面我们一起来重新做一个吧。
前端入门：HTML（表单）
yscy0801的博客
03-28 827
前端
HTML_表单
weixin_73805051的博客
10-24 81
元素内部，您可以放置内容，比如文本或图像。这是该元素与使用<input>元素创建的按钮之间的不同之处。提示：请始终为<button>元素规定 type 属性。不同的浏览器对<button>元素的 type 属性使用不同的默认值。type属性:可以设置三个值 submit（提交）/reset（重置）/button（自定义按钮）与input元素设置的按钮含义一致<button type="button">按钮
html设置表中单行文本框属性,HTML表单
weixin_42107561的博客
06-04 3403
HTML表单语法 表单元素：文本域单选框复选框按钮列表form标签中表单元素：——表单输入标签——表单和列表标签——菜单和列表项目标签——文字域标签——菜单和列表项目分组标签标签语法：type属性值：text——文字域password——密码域file——文件域checkbok——复选域radio——单选域button——按钮submit——提交按钮reset——重置按钮hidden——隐藏...
HTML-input文本框（添加提示文字，填写内容时消失）
热门推荐
Bule_daze的博客
01-26 11万+
input文本框内添加提示文字，填写内容时消失： 用placeholder属性作为提示语 <input placeholder="提示语..."></input>
java样式input下滑波浪线_input的各种样式
weixin_32513585的博客
02-26 338
输入框景背景透明：鼠标划过输入框，输入框背景色变色：style="width: 106; height: 21"onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black">输入字时输入框边框闪烁(边框为小...
html文本框提示文字设置
fengzhongdeyuyi1992的专栏
03-08 3万+
设置html文本框提示文字 两种方式 1，设置placeholder属性                                                                              2.使用onfocus方式和onblur方法                                    
机器学习学习笔记.pdf
07-05
### 回答1： 《机器学习学习笔记.pdf》是一本关于机器学习的学习笔记的电子书，其内容涵盖了机器学习的基本概念、算法原理和实践应用等方面。 该电子书的主要内容包括但不限于以下几个方面： 1. 机器学习基础：介绍了机器学习的基本概念、发展历史和核心原理，帮助读者建立起对机器学习的整体认识和理解。 2. 机器学习算法：详细介绍了常见的机器学习算法，包括监督学习算法（如线性回归、逻辑回归、决策树、支持向量机等）、无监督学习算法（如聚类算法、降维算法等）和强化学习算法等，使读者能够了解和掌握不同类型的机器学习算法及其应用场景。 3. 机器学习实践：讲解了机器学习的实践方法和流程，涵盖了数据预处理、特征工程、模型选择和评估等方面的内容，帮助读者掌握如何在实际问题中应用机器学习技术。 4. 应用案例：通过实际案例的介绍和分析，展示了机器学习在自然语言处理、计算机视觉、推荐系统等领域的应用，激发读者对机器学习在实际问题中的应用的兴趣和思考能力。 通过阅读《机器学习学习笔记.pdf》，读者可以系统地学习机器学习的基础知识和算法原理，了解机器学习的应用场景和实践方法，并通过实际案例的分析加深对机器学习技术的理解。这本电子书可以作为机器学习初学者的入门学习资料，也适合有一定机器学习基础的读者作为参考和进一步学习的资料。希望通过这本电子书的阅读，读者能够理解和掌握机器学习的相关知识，为未来在机器学习领域的学习和研究打下坚实的基础。 ### 回答2： 《机器学习学习笔记.pdf》是一本介绍机器学习的学习资料。机器学习是一种通过利用数据来训练计算机算法的方法，使其能够自动地从数据中学习和提高性能。这本学习笔记涵盖了机器学习的基本概念、原理和方法，适合初学者和对机器学习感兴趣的读者。 首先，学习笔记从机器学习的基本概念入手，包括机器学习的定义、应用领域以及机器学习的三个主要任务：监督学习、无监督学习和强化学习。然后，详细介绍了机器学习的基本原理，如训练集、测试集、特征选择和模型评估等。此外，学习笔记还介绍了几种常见的机器学习算法，如决策树、支持向量机和深度学习等。 除了理论知识，学习笔记还提供了实践案例和代码示例，帮助读者更好地理解和应用机器学习算法。读者可以通过实践案例来掌握机器学习算法的具体应用，并且可以利用代码示例进行实际编程实践。同时，学习笔记还讨论了机器学习的一些挑战和未来的发展方向，如数据质量、模型解释性和自动化机器学习等。 总的来说，《机器学习学习笔记.pdf》是一本全面介绍机器学习的学习资料。它结合理论和实践，旨在帮助读者建立对机器学习的基本理解，并具备在实际问题中应用机器学习算法的能力。无论是初学者还是有一定机器学习基础的读者，都可以从中获得有益的知识和经验。 ### 回答3： 《机器学习学习笔记.pdf》是一本关于机器学习的学习笔记文档。机器学习是人工智能领域的重要分支，它研究如何使计算机系统自动从数据中学习和改进，以完成特定任务。这本学习笔记以简洁明了的方式介绍了机器学习的基本概念、算法和实践应用。 笔记中首先介绍了机器学习的基础知识，包括监督学习、无监督学习和强化学习等不同的学习类型。然后详细讲解了常用的机器学习算法，如线性回归、逻辑回归、决策树、支持向量机等。每种算法都给出了清晰的定义和示例，并详细解释了算法的原理和应用场景。 此外，《机器学习学习笔记.pdf》还包括了机器学习的实践应用和案例分析。它介绍了如何通过Python等编程语言和机器学习库进行实际的机器学习项目开发，包括数据预处理、特征工程、模型训练和评估等环节。对于初学者来说，这部分内容非常有价值，可以帮助他们快速进入实际应用的阶段。 总结来说，《机器学习学习笔记.pdf》是一本很好的机器学习入门教材，它详细介绍了机器学习的基本概念和常用算法，并提供了实际项目的实践指导。无论是对于想要了解机器学习基础知识的初学者，还是对于已经有一定机器学习经验的开发者来说，这本学习笔记都是一本值得阅读和参考的资料。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值