Night小课堂04 HTML表单

2023-11-09 07:50
文章标签 表单 html 课堂 04 frontend night

本文主要是介绍Night小课堂04 HTML表单，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

上一篇文章讲了HTML中的列表和表格，这篇文章主要讲关于HTML中表单的内容

表单定义：多个输入框及按钮以表格的形式展示

表单应用场景：表单常用于制作网页中登录注册功能

表单代码结构：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表单代码结构</title></head><body><form><table border="1px solid black"><tr><td colspan="2">登录页面</td></tr><tr><td>用户名</td><td><input type="text"/></td></tr><tr><td>密码</td><td><input type="password"/></td></tr><tr><td colspan="2"><input type="submit" value="提交"/><input type="reset" value="重置"/></td></tr></table></form></body>
</html>

效果图：

表单元素属性：<input type="xx" value="xx" name="xx" />

1.type:指定当前元素的类型

2.value:所见即所得，默认初始化可看到的

3.name:提交到后端服务器的值的key

表单常见应用：

1.文本框

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>文本框</title></head><body><form>文本框：<input type="text" value="初始值"/></form></body>
</html>

效果图：

特点1：type="text"  用户输入的值在页面中明文显示    特点2：value="xx"     文本框中默认的值

2.密码框

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>密码框</title></head><body><form>密码框：<input type="password" value=""/></form></body>
</html>

效果图：

特点1：type="password" 用户输入的值在页面中暗文显示

3.单选按钮

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>单选按钮</title></head><body><form>男：<input type="radio" name="sex" value="1" checked="checked"/>女：<input type="radio" name="sex" value="0"/>	</form></body>
</html>

效果图：

特点1：type="radio"  代表是单选按钮

特点2：name="xx"    代表两个单选按钮如果保持一致的话，代表是单选，否则为多选

特点3：value="xx"    代表发送到后端服务器中的值，而不是展示，前端页面是看不见的

特点4：checked       代表初始化页面的时候默认勾选某个单选框，等价于checked="checked"  

4.多选按钮

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>多选按钮</title></head><body><form>香蕉：<input type="checkbox" name="fruit" value="0" checked="checked" />苹果：<input type="checkbox" name="fruit" value="1" />橘子：<input type="checkbox" name="fruit" value="2" /></form></body>
</html>

效果图：

特点1：type="checkbox"  代表是多选按钮

特点2：name="fruit"        注意点：多个多选框按钮需要保持name的值保持一致

特点3：value="xx"          代表发送到后端服务器中的值，而不是展示

特点4：checked            代表初始化页面的时候默认勾选某个单选框，等价于checked="checked"  

4.列表框

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>列表框</title></head><body><select><option value="0">星期天</option><option value="1">星期一</option><option value="2">星期二</option><option value="3">星期三</option><option value="4">星期四</option><option value="5">星期五</option><option value="6">星期六</option></select></body>
</html>

效果图：

特点1：select 是列表框中表的标签名

特点2：option 是列表框中列的标签名

特点3：select和option 是一对组合，不可分离

特点4：value 存放的值是用来发送到服务器后端的，不是用来展示的

特点5：option 之间的文本值是用来展示的

5.按钮

按钮常用的分为三种 reset submit button

reset：重置

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>重置</title></head><body><form>用户名：<input type="text" /><br /><input type="reset" value="重置" />	</form></body>
</html>

效果图：

 submit：提交

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>提交</title></head><body><form action="index.html"><input type="submit" value="提交"/></form></body>
</html>

效果：点击提交，实现页面跳转（跳到action中写的页面）

特点1：form中action存放了index.html页面的全路径

特点2：type="submit"触发了当前表单，并跳转到action中的页面

button：普通按钮

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>普通按钮</title></head><body><form><input type="button" value="登录" /></form></body>
</html>

效果图：

value中写什么就显示什么按钮，上图虽然是登录键，但是却没有登录功能，只是一个普通按钮

6.多行文本域

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>多行文本域</title></head><body><form><textarea></textarea></form></body>
</html>

效果图：

7.文件域

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>文件域</title></head><body><form><input type="file" formenctype="multipart/form-data"/><input type="submit" value="上传" /></form></body>
</html>

效果图：

8.邮件

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>邮件</title></head><body><form action="index02.html"><table border="1px"><tr><td>请输入邮箱地址：</td><td><input type="email" required="required"/></td></tr><tr><td colspan="2"><input type="submit"  value="提交"/></td></tr></table></form></body>
</html>

效果图：

特点1：type="email"代表如果用户输入邮箱的地址不符合邮箱地址的规范，会导致当用户触发submit按钮之后，无法转发到action中的html页面，并提示警告

9.网址

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>网址</title></head><body><form action="index02.html">请输入你的网址：<input type="url" required="required"/><br /><input type="submit" value="提交"/></form></body>
</html>

效果图：

特点1：type="url"代表提交表单后，网址必须符合规范，否则会提示“请输入网址”

10.数字

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>数字</title></head><body><form><input type="number" step="2" max="10" min="1"/></form></body>
</html>

效果图：

特点1：type="number"代表的含义是展示可以限制用户输入数值范围的标签类型

特点2：min代表范围的最小值

特点3：max代表范围的最大值

特点4：step代表用户每一次选择数值之间的步长（step=2 点一次就是0+2）

11.滑块

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>滑块</title></head><body><form><input type="range" min="0" max="10" step="3"/></form></body>
</html>

效果图：

12.搜索框：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>搜索框</title></head><body><form>搜索框：<input type="search" /><br />文本框：<input type="text" /></form></body>
</html>

效果图：

特点1：type="search"代表的含义是 带有删除按钮的搜索框（删除按钮在搜索框之内）

以上是表单常见应用

表单的高级应用：

1.隐藏域：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>隐藏域</title></head><body><form><table border="1px"><tr><th colspan="3">管理后台查询页面</th></tr><tr><input type="hidden" value="1000" name="id"/><td>用户名</td><td>体重</td><td>身高</td></tr><tr><input type="hidden" value="1001" name="id"/><td>小A</td><td>120</td><td>170</td></tr><tr><input type="hidden" value="1002" name="id"/><td>小B</td><td>130</td><td>185</td></tr></form></body>
</html>

效果图：

特点1：type="hidden"代表当前记录不需要展现在当前行上，但是需要隐藏起来并发送给后端服务器

2.只读和禁用：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>只读和禁用</title></head><body><form><input type="text" value="123"/><input type="text" value="123" readonly="readonly"/><input type="text" value="123" disabled="disabled"/></form></body>
</html>

效果图：

特点1：readonly代表不可编辑

特点2：disabled代表置灰效果且不可编辑

3.表单元素的标注：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表单元素的标注</title></head><body><form><label for="male">男：</label><input type="radio" name="sex" value="0" id="male"/><br /><label for="female">女：</label><input type="radio" name="sex" value="1" id="female"/><br /></form></body>
</html>

效果图：

作用：优化用户体验，尤其是让手机端的用户不用点选项，点字附近也能选择成功

特点1：在input标签中加入id="xx"

特点2：在label标签中加入for="xx"

表单的初级验证：

1.表单的初级验证缘由 ： 1）减轻服务器压力 2）安全性

2.表单的初级验证元素标签: 1）placeholder 2）required

3.placeholder:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>placeholder</title></head><body><form>单纯的search：<input type="search" /><br/>加入value默认值：<input type="search" value="请输入关键词"/><br/>搜索：<input type="search" placeholder="请输入关键词" /><br/></form></body>
</html>

效果图：

特点1：input类型的文本框提供一种提示

特点2：可以描述文本框期待用户输入何种内容

特点3：提示语默认显示，当文本框中输入内容时提示语消失

特点4：适合于input标签：text、search、url、email和password等类型

4.required：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>required</title></head><body><form action="index.html">用户名：<input type="text" required="required"/><br /><input type="submit" value="提交" /><br /></form></body>
</html>

效果图：

特点1：规定文本框填写内容不能为空，否则不允许用户提交表单

特点2：适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

下期预告：下一篇文章将介绍关于CSS的知识

本人才疏学浅，文中如有出现错误请多多谅解

这篇关于Night小课堂04 HTML表单的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/374844。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
【VUE】跨域问题的概念，以及解决方法。

【VUE】跨域问题的概念，以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略，该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同，则需要服务器显式地允许这种跨域请求。一般在springbo
阅读更多...
HTML提交表单给python

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',
阅读更多...
Java 后端接口入参 - 联合前端VUE 使用AES完成入参出参加密解密

Java 后端接口入参 - 联合前端VUE 使用AES完成入参出参加密解密

加密效果： 解密后的数据就是正常数据： 后端：使用的是spring-cloud框架，在gateway模块进行操作 <dependency><groupId>com.google.guava</groupId><artifactId>guava</artifactId><version>30.0-jre</version></dependency> 编写一个AES加密
阅读更多...
vue2 组件通信

vue2 组件通信

props + emits props:用于接收父组件传递给子组件的数据。可以定义期望从父组件接收的数据结构和类型。‘子组件不可更改该数据’emits:用于定义组件可以向父组件发出的事件。这允许父组件监听子组件的事件并作出响应。(比如数据更新) props检查属性 属性名类型描述默认值typeFunction指定 prop 应该是什么类型，如 String, Number, Boolean,
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2