HTML表单元素

简介: HTML表单元素

一、表单的语法:


1.提交方式:


get:不安全,地址栏里面有提交内容

post:相对安全,地址栏里面不显示提交的内容


2.提交按钮:submit


3.重置按钮:reset


4.input中常用的属性:


1)type:表示表单元素的类型,常见的值,

text,password,checkbox,radio,submit,reset,file,email,number,url,hidden,image,button,search。


2)name:指定表单元素的名称。


3)value:指定表单元素的初始值


4)size:指定表单元素的初始宽度,如果type为text或者password,那么此属性以字符为单位,否则以像素为单位。


5)maxlength:指定输入的最大字符数,默认为无限制


6)checked:指定单选按钮或者多选框是否被选中


5.密码表单:type=“password”


6.单选按钮:


语法:男

注意事项:name的值必须一样,才能实现单选


7.复选框:


注意:checked为默认选中。


8.下拉列表:


语法:


选项一

选项二


9.按钮:


普通按钮:普通按钮


提交按钮:


重置按钮:



10.多行文本域:


显示的文本



11.上传文件:


注意:上传的文件的时候,需要在标签里面添加属性(enctype=“mutipart/form-data”)



12.邮箱:


13.数字:


14.搜索:



二、表单的高级应用:


1.设置表单的隐藏域:


2.表单的禁用与只读设置:


只读:readonly

禁用:disabled



3.表单元素标注:


4.表单验证的好处:


缓解服务器的压力

保证数据的可行性和安全性



5.placeholder:提示内容,这种提示可以描述文本框期待用户输入何种内容。


6.非空验证:required


7.正则表达式验证:pattern

eg:电话号码的正则表达式,pattern="1\d{9}"



目录
相关文章
|
18天前
HTML_表单标签
HTML_表单标签
16 0
|
1天前
|
前端开发
html中行内元素、块级元素、行内快元素都有哪些,以及区别
html中行内元素、块级元素、行内快元素都有哪些,以及区别
11 1
|
5天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
7天前
|
移动开发 JavaScript 前端开发
【专栏:HTML进阶篇】HTML模板与Web组件:可复用的网页元素
【4月更文挑战第30天】HTML模板和Web组件提升网页开发效率和可维护性。HTML模板,如<template>元素和服务器端模板引擎,用于创建可复用的HTML结构。Web组件是自定义的HTML元素,结合影子DOM和模板,实现封装的可重用组件。两者助力构建高效、现代的网页和网站。
|
7天前
|
存储 移动开发 安全
【专栏:HTML基础篇】HTML表单基础:创建用户交互界面
【4月更文挑战第30天】本文介绍了HTML表单的基础知识,包括表单的基本概念、输入元素(如文本框、密码框、单选/复选框、提交/重置按钮等)、表单属性(如action、method、target)以及表单验证。了解这些内容能帮助开发者创建功能齐全、交互性强的用户界面,提升网页开发技能。
|
7天前
|
移动开发 前端开发 JavaScript
【专栏:HTML基础篇】深入HTML元素:理解结构与内容
【4月更文挑战第30天】本文探讨了HTML在构建网页中的核心作用,HTML元素构成网页结构与内容,包括`<!DOCTYPE html>`、`<html>`、`<head>`、`<body>`等基本元素及`<div>`、`<span>`、`<a>`、`<img>`等丰富标签。理解并恰当使用这些元素能创建清晰结构、优化SEO、增强交互性,并实现语义化,为打造功能强大且美观的网站奠定基础。进一步学习CSS和JavaScript将提升网页视觉效果和互动性。
|
8天前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型(获取、改变html元素)
JavaScript DOM 文档对象模型(获取、改变html元素)
|
15天前
|
移动开发 JavaScript HTML5
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
14 0
|
19天前
|
移动开发 前端开发 JavaScript
《HTML 简易速速上手小册》第8章:HTML 表单高级技术(2024 最新版)
《HTML 简易速速上手小册》第8章:HTML 表单高级技术(2024 最新版)
33 0
|
19天前
|
移动开发 JavaScript 前端开发
《HTML 简易速速上手小册》第4章:HTML 的表单与输入(2024 最新版)
《HTML 简易速速上手小册》第4章:HTML 的表单与输入(2024 最新版)
37 0