【零基础入门前端系列】—表单(七)

简介: 【零基础入门前端系列】—表单(七)

一、什么是表单

表单在Web网页中用来给访问者填写信息,从而采集客户信息端,使得网页具有交互功能。一般是将表单设计在一个HTML文档中,当用户填写完信息后做提交操作,于是表单的内容就从客户端的浏览器传到服务器上,经过服务器的ASP或PHP等处理后,再将用户所需要的信息传送到客户端的浏览器上,这样网页就具有了交互性


🎈get和post的区别

1、数据的提交方式,get把提交的数据url可以看到,post看不到

2、get一般是用于提交少量的数据,post用于提交大量的数据

计算机中的位:二进制数系统中,每个0或1就是一个位,位是数据存储的最小单位。其中8位为一个字节。计算机中的CPU位数指的是CPU一次性能处理的最大位数。例如32位计算机的CPU一次最多能处理32位数据。

二、表单元素

表单元素的属性

  • type:表单元素的类型
  • name:表单元素的名称
  • checked:默认被选中,配合单选按钮和多选按钮使用
  • selected:默认显示 配合option使用
  • disabled:禁用
  • readonly:只读

三、HTML5新增type类型

<form action="" method="post">
        <p>
            邮箱:<input type="email">
        </p>
        <p>
            网址:<input type="url">
        </p>
        <p>
            搜索:<input type="search">
        </p>
        <p>
            数字:<input type="number" min="0" max="100" value="85" step="5">
        </p>
        <p>
            范围(滑块): <input type="range" min="0" max="100" value="20" step="10">
        </p>
        <p>
            颜色:<input type="color">
        </p>
        <p>
            电话:<input type="tel">
        </p>
        <p>日期:<input type="date"></p>
        <p>
            周:<input type="week">
        </p>
        <p>
            月:<input type="month">
        </p>
    </form>

四、HTML5新增属性

(一)、autofocus属性

autofocus属性规定在页面加载时,自动获取焦点

注意:autofocus属性适用于所有input标签的类型

Username: <input type="text" name="username" autofocus>

(二)、multiple属性

  • 该属性规定输入域中可以选择多个值
  • 注意:该属性适用于以下类型的input标签:email和file
<input type="email" multiple>

(三)、placeholder属性

该属性提供一种提示(hint),描述输入域所期待的值

用户名:<input type="text" placeholder="请输入用户名">

(四)、required属性

required属性规定必须在提交之前写入域(不能为空)

Name: <input type="text" name="username" required>


相关文章
|
7月前
|
前端开发
Web前端---表格和表单
Web前端---表格和表单
80 1
|
7月前
|
前端开发 小程序
前端解析支付宝返回form表单,自动跳转支付
前端解析支付宝返回form表单,自动跳转支付
296 1
|
前端开发 JavaScript
前端基础 - JavaScript之表单获取焦点及失去焦点
前端基础 - JavaScript之表单获取焦点及失去焦点
162 0
|
5月前
|
前端开发
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
216 6
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
前端技术分享:使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享:使用Vue.js构建响应式表单
|
3月前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
3月前
|
缓存 前端开发 数据可视化
前端基础(七)_表单的基本组成与使用
本文详细介绍了HTML表单的基本组成和使用,包括`<form>`标签、`<input>`表单域、`<select>`下拉列表、`<textarea>`多行文本域等元素。文章解释了表单的提交方式(GET和POST)、表单域的各种类型(文本、密码、单选按钮、复选框等)、提交按钮和重置按钮的作用,以及如何通过`<label>`标签提高表单的可访问性。此外,还讨论了表单元素的属性,如`readonly`、`disabled`、`maxlength`等。
39 1
|
3月前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】02 表单-input标签-单选框-多选框
本文介绍了HTML中`&lt;input&gt;`标签的基本使用方法及其应用场景,如登录、注册页面和搜索区域。通过设置`type`属性,可以实现文本框、密码框、单选框、多选框及文件上传等功能。此外,还详细说明了占位文本的使用、单选框的常用属性及多选框的默认选中状态,并提供了示例代码与效果展示。
|
4月前
|
前端开发 JavaScript
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
这篇文章介绍了使用AJAX技术将前端页面中表单接收的多个参数快速便捷地传输到后端servlet的方法,并通过示例代码展示了前端JavaScript中的AJAX调用和后端servlet的接收处理。
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
|
4月前
|
前端开发
第一种方式:使用form表单将前端数据提交到servelt(将前端数据提交到servlet)
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
第一种方式:使用form表单将前端数据提交到servelt(将前端数据提交到servlet)