web前端学习(十)——HTML5中网页表单的相关标签设置

简介: web前端学习(十)——HTML5中网页表单的相关标签设置

1.表单标签


表单主要用于收集网页上浏览者的相关信息,其标签为:<form>...</form>,其基本语法格式如下:👇👇👇 

 <form action="url" method="get" enctype="mime">
 </form>

其中,action中的内容指定处理提交表单的格式,它可以是一个URL地址或者一个电子邮件地址。method中的内容指明提交表单的HTTP方法。enctype中的内容指明用来把表单提交给服务器时的互联网媒体形式。 

简单的实例如下:👇👇👇

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
  </head>
  <body>
    <form>
      下面是用户登录信息
      <br/>
      用户名称
      <input type="text" name="user"/>
      <br/>
      用户密码
      <input type="password" name="password"/>
      <br/>
      <input type="submit" value="登录"/>
    </form>
  </body>
</html>

 

2.文字字段


2.1 单行文本输入框(text

文本框是一种让访问者自己输入内容的表单对象,通常用来填写单个字或者简单的回答,代码格式如下:👇👇👇 

<input type="text" name="..." size="..." maxlength="..." value="...">

其中,type="text"定义单行文本输入框。

name属性定义文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称。

size属性定义文本框的宽度,单位是单个字符宽度。

maxlength属性定义最多输入的字符数。

value属性定义文本框的初始值。具体实例如下:👇👇👇

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
  </head>
  <body>
    <form>
      请输入您的姓名
      <input type="text" name="yourname" size="20" maxlength="15"/>
      <br/>
      请输入您的地址
      <input type="text" name="youraddress" size="20" maxlength="15"/>
    </form>
  </body>
</html>

2.2 多行文本输入框(textarea

多行文本输入框主要用于输入较长的文本信息,代码格式如下:👇👇👇 

 <textarea name="..." cols="..." rows="..." wrap="...">
 </textarea>

其中,name属性定义多行文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称。

cols属性定义多行文本框的宽度;rows属性定义多行文本框的高度。

wrap属性定义输入内容大于文本域时的显示方式。具体实例如下:👇👇👇

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
  </head>
  <body>
    <form>
      请简述您最近的学习情况<br/>
      <textarea name="yourstudy" cols="50" rows="10"></textarea>
      <br/>
      <input type="submit" value="提交"/>
    </form>
  </body>
</html>

2.3 密码域(password

密码输入是一种特殊的文本域,主要用于输入一些保密信息。当网页浏览者输入文本时,显示的是黑点或者其他符号,这样就增加了输入文本的安全性。代码格式如下:👇👇👇 

<input type="password" name="..." size="..." maxlength="..."/>

其中,type="password"定义密码框。name属性定义密码框的名称,要保证唯一性。

size属性定义密码框的宽度。maxlength属性定义最多输入的密码字符数。具体实例如下:👇👇👇

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
  </head>
  <body>
    <form>
      用户姓名:
      <input type="text" name="yourname"/><br/>
      登录密码:
      <input type="password" name="yourpassword"/><br/>
    </form>
  </body>
</html>

2.4 单选按钮(radio

单选按钮主要是让网页浏览者在一组选项里选择一个。代码格式如下:👇👇👇 

<input type="radio" name="..." value="..."/>

其中,type="radio"定义单选按钮。

name属性定义单选按钮的名称,单选按钮都是以组为单位使用的,在同一组中的单选选项都必须使用同一个名称。

value属性定义单选按钮的名称,在同一组中,它们的值必须是不同的。具体实例如下:👇👇👇

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
  </head>
  <body>
    <form>
      请选择您感兴趣的图书类型:<br/>
      <input type="radio" name="book" value="Book1"/>网站编程<br/>
      <input type="radio" name="book" value="Book2"/>办公软件<br/>
      <input type="radio" name="book" value="Book3"/>设计软件<br/>
      <input type="radio" name="book" value="Book4"/>网络管理<br/>
      <input type="radio" name="book" value="Book5"/>黑客攻防<br/>
    </form>
  </body>
</html>

2.5 复选框(checkbox

复选框主要是让网页浏览者在一组选项里同时选择多个选项(也即多选框),每个复选框都是一个独立的元素,都必须有一个唯一的名称。代码格式如下:👇👇👇 

<input type="checkbox" name="..." value="..."/>

其中,type="checkbox"定义复选框。

name属性定义复选框的名称,在同一组中的复选框都必须用同一个名称。

value属性定义复选框的值。具体实例如下:👇👇👇

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
  </head>
  <body>
    <form>
      请选择您感兴趣的图书类型:<br/>
      <input type="checkbox" name="book" value="Book1"/>网站编程<br/>
      <input type="checkbox" name="book" value="Book2"/>办公软件<br/>
      <input type="checkbox" name="book" value="Book3"/>设计软件<br/>
      <input type="checkbox" name="book" value="Book4"/>网络管理<br/>
      <input type="checkbox" name="book" value="Book5"/>黑客攻防<br/>
    </form>
  </body>
</html>

2.6 下拉菜单

使用 select + option 可以创建单选或多选下拉菜单。具体实例如下:👇👇👇

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
  </head>
  <body>
    <select>
      <option>列表1</option>
      <option>列表2</option>
      <option>列表3</option>
      <option>列表4</option>
    </select>
  </body>
</html>

在运行结果中,点击下拉菜单的小箭头,即可看到我们设置的下拉菜单中的几个选项:列表1、列表2、列表3、列表4


2.7 列表框  

列表框主要用于在有限的空间里设置多个选项,即可用作单选,也可用作多选。代码格式如下:👇👇👇 

 <select name="..." size="..." multiple>
 <option value="..." selected>...</option>
  </select>

其中,size属性定义下拉选择框的行数。name属性定义下拉选择框的名称。

multiple属性表示可以多选,如果不设置本属性,那么只能单选。

value属性定义选择项的值。selected属性表示默认已经选择本选项。具体实例如下:👇👇👇 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
  </head>
  <body>
    <form>
      请选择您感兴趣的图书类型:<br/>
      <select name="book" size="3" multiple>
        <option value="Book1" selected>网站编程</option>
        <option value="Book2">办公软件</option>
        <option value="Book3">设计软件</option>
        <option value="Book4">网络管理</option>
        <option value="Book5">黑客攻防</option>
      </select>
    </form>
  </body>
</html>

2.8 普通按钮(button

普通按钮用来控制其他定义了处理脚本的处理工作。代码格式如下:👇👇👇

<input type="button" name="..." value="..." onclick="...">

其中,type="button"定义普通按钮。name属性定义普通按钮的名称。value属性定义按钮的显示文字。

onclick属性表示单击行为,也可以是其他的事件,通过指定脚本函数来定义按钮的行为。

具体实例如下:👇👇👇

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
  </head>
  <body>
    <form>
      点击下面的按钮,把文本框1中的内容复制到文本框2中:<br/>
      文本框1:<input type="text" id="field1" value="学习HTML的技巧"/><br/>
      文本框2:<input type="text" id="field2"/><br/>
      <input type="button" name="..." value="点击我" onclick="document.getElementById('field2').value
        =document.getElementById('field1').value"/>
    </form>
  </body>
</html>

上图的运行结果中,在文本框1中输入相应的内容,之后点击下面的按钮点击我即可将文本框1的内容复制到文本框2中。


2.9 提交按钮(submit

提交按钮用来将输入的信息提交到服务器。代码格式如下:👇👇👇 

<input type="submit" name="..." value="..."/>

其中,type="submit"定义提交按钮。name属性定义提交按钮的名称。

value属性定义按钮的显示文字。通过提交按钮可以将表单里的信息提交给表单里action所指向的文件。

具体实例如下:👇👇👇

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
  </head>
  <body>
    <form action="https://www.baidu.com" method="get">
      请输入你的姓名:
      <input type="text" name="name"/><br/>
      请输入你的电话:
      <input type="text" name="telephone"/><br/>
      请输入你的身份证号:
      <input type="text" name="IDCard"/><br/>
      <input type="submit" value="提交"/>
    </form>
  </body>
</html>

在以上三个文本框中输入相应的内容,之后点击提交按钮,即可实现将表单中的数据发送百度的首页(action="https://www.baidu.com")。


2.10 重置按钮(reset

重置按钮用来重置表单中输入的信息。代码格式如下:👇👇👇 

<input type="reset" name="..." value="..."/>

其中,type="reset"定义重置按钮。name属性定义重置按钮的名称。value属性定义按钮的显示文字。

具体实例如下:👇👇👇

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>HTML简单学习</title>
  </head>
  <body>
    <form>
      请输入用户名称:
      <input type="text" name="name"/><br/>
      请输入用户密码:
      <input type="password" name="password"/><br/>
      <input type="submit" value="登录"/>
      <input type="reset" value="重置"/>
    </form>
  </body>
</html>

以上运行结果中,在两个文本框中输入相应的内容,点击重置按钮即可清空两个文本框中的所有内容。

相关文章
|
1天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
10 3
|
1天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
12 3
|
1天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
10 2
|
2天前
|
开发框架 前端开发 JavaScript
Web前端框架
Web前端框架等名词
11 2
|
12天前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
14天前
|
存储 前端开发 JavaScript
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
【10月更文挑战第4天】本文探讨了从 Web 2.0 到 Web 3.0 的前端开发演变过程。Web 2.0 时代,前端开发者从静态网页设计走向复杂交互,技术框架如 jQuery、React 和 Vue 带来了巨大的变革。而 Web 3.0 以区块链技术为核心,带来了去中心化的互联网体验,前端开发者面临与区块链交互、去中心化身份验证、分布式存储等新挑战。文章总结了 Web 2.0 和 Web 3.0 的核心区别,并为开发者提供了如何应对新技术的建议,帮助他们在新时代中掌握技能、设计更安全的用户体验。
46 0
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
|
2天前
|
监控 前端开发 JavaScript
前端技术探索:构建高效、可维护的Web应用
【10月更文挑战第23天】前端技术探索:构建高效、可维护的Web应用
7 0
|
15天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
|
15天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
30 0
|
15天前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。