网站开发源码售卖合同,百度移动网站排名,代写文章的平台有哪些,云南网站建设模块在前边#xff0c;我们已经写过Web前端开发#xff0c;Web前端开发#xff0c;万字详细博文带你HTML#xff0c;CSS快速入门#xff08;上篇#xff09;和Web前端开发#xff0c;一文带你HTML#xff0c;CSS快速入门#xff08;下篇#xff09;#xff0c;使用近两万… 在前边我们已经写过Web前端开发Web前端开发万字详细博文带你HTMLCSS快速入门上篇和Web前端开发一文带你HTMLCSS快速入门下篇使用近两万字详细介绍了HTML和CSS中的基础知识还对HTML和CSS基础知识的今天我们继续对前端知识进行补充。 在前端开发里表单是收集用户输入信息的重要工具常用于用户注册、登录、搜索等场景。下面详细介绍表单内容的使用。 一. 表单基本结构 表单由表单项组成 form 标签用于创建表单action 属性指定表单提交的目标 URLmethod 属性指定提交方法GET 或 POST。
form actionsubmit.php methodpost!-- 表单元素 --input typesubmit value提交
/form
二. 表单项标签
1. input 标签 input 是自闭合标签type 属性决定其类型
2. textarea 标签 用于输入多行文本rows 和 cols 属性分别指定行数和列数
3. select 和 option 标签 select 用于创建下拉列表option 用于定义下拉列表中的选项value 属性指定选项的值
4. button 标签 可作为表单按钮type 属性可设置为 submit、reset 或 button 这些表单项标签能组合使用创建出各种功能的表单满足不同的数据收集需求。 三. 常见表单元素
1.文本输入框 input typetext 用于输入单行文本。
label forusername用户名:/label
input typetext idusername nameusername placeholder请输入用户名
2.密码输入框 input typepassword 用于输入密码输入内容会被隐藏。
label forpassword密码:/label
input typepassword idpassword namepassword placeholder请输入密码
3.单选按钮 input typeradio 用于从多个选项中选择一个。
label formale男/label
input typeradio idmale namegender valuemale
label forfemale女/label
input typeradio idfemale namegender valuefemale
4.复选框 input typecheckbox 用于从多个选项中选择多个。
label forapple苹果/label
input typecheckbox idapple namefruits valueapple
label forbanana香蕉/label
input typecheckbox idbanana namefruits valuebanana
5.下拉列表 select 和 option 标签用于创建下拉列表。
label forcity城市:/label
select idcity namecityoption valuebeijing北京/optionoption valueshanghai上海/optionoption valueguangzhou广州/option
/select
6.文本域 textarea 用于输入多行文本。
label formessage留言:/label
textarea idmessage namemessage rows4 cols50 placeholder请输入留言内容/textarea
7.文件上传 input typefile 用于上传文件。
label forfile上传文件:/label
input typefile idfile namefile
四. 表单提交 input typesubmit 或 button typesubmit 用于提交表单。
input typesubmit value提交
!-- 或者 --
button typesubmit提交/button
五. 表单重置 input typereset 或 button typereset 用于重置表单内容。
input typereset value重置
!-- 或者 --
button typereset重置/button
六.综合案例
!DOCTYPE html
!-- 定义 HTML 文档设置语言为英语 --
html langen
head!-- 设置文档的字符编码为 UTF-8 --meta charsetUTF-8!-- 设置页面在不同设备上的视口显示让页面宽度等于设备宽度初始缩放比例为 1.0 --meta nameviewport contentwidthdevice-width, initial-scale1.0!-- 设置页面标题 --titleDocument/title
/head
body!-- 创建一个带边框的表格单元格间距为 0具体表格内容省略 --table styleborder:1px solid cellspacing0!-- ... 表格代码 ... --/table!-- 创建一个表单提交地址为 submit.php使用 POST 方法提交前调用 validateForm 函数进行验证 --form actionsubmit.php methodpost onsubmitreturn validateForm()!-- 为用户名输入框创建标签 --label forusername用户名:/label!-- 创建一个文本输入框用于输入用户名设置 id 和 name 属性添加占位提示信息 --input typetext idusername nameusername placeholder请输入用户名br!-- 为密码输入框创建标签 --label forpassword密码:/label!-- 创建一个密码输入框设置 id 和 name 属性添加必填属性 --input typepassword idpassword namepassword requiredbr!-- 为男性单选按钮创建标签 --label formale男/label!-- 创建一个单选按钮代表男性设置 id、name 和 value 属性 --input typeradio idmale namegender valuemale!-- 为女性单选按钮创建标签 --label forfemale女/label!-- 创建一个单选按钮代表女性设置 id、name 和 value 属性 --input typeradio idfemale namegender valuefemalebr!-- 为苹果复选框创建标签 --label forapple苹果/label!-- 创建一个复选框代表苹果选项设置 id、name 和 value 属性 --input typecheckbox idapple namefruits valueapple!-- 为香蕉复选框创建标签 --label forbanana香蕉/label!-- 创建一个复选框代表香蕉选项设置 id、name 和 value 属性 --input typecheckbox idbanana namefruits valuebananabr!-- 为城市下拉选择框创建标签 --label forcity城市:/label!-- 创建一个下拉选择框设置 id 和 name 属性 --select idcity namecity!-- 定义下拉选项值为 beijing显示文本为北京 --option valuebeijing北京/option!-- 定义下拉选项值为 shanghai显示文本为上海 --option valueshanghai上海/option!-- 定义下拉选项值为 guangzhou显示文本为广州 --option valueguangzhou广州/option/selectbr!-- 为留言文本域创建标签 --label formessage留言:/label!-- 创建一个文本域用于输入留言内容设置 id、name、行数和列数添加占位提示信息 --textarea idmessage namemessage rows4 cols50 placeholder请输入留言内容/textareabr!-- 为文件上传输入框创建标签 --label forfile上传文件:/label!-- 创建一个文件上传输入框设置 id 和 name 属性 --input typefile idfile namefilebr!-- 创建一个提交按钮点击后提交表单 --input typesubmit value提交!-- 创建一个重置按钮点击后重置表单内容 --input typereset value重置/formscript/*** 验证表单的函数在表单提交前检查密码长度* returns {boolean} 如果密码长度符合要求返回 true否则返回 false*/function validateForm() {// 获取密码输入框的值const password document.getElementById(password).value;// 检查密码长度是否小于 6 位if (password.length 6) {// 若密码长度不足弹出提示框alert(密码长度至少为 6 位);// 返回 false 阻止表单提交return false;}// 密码长度符合要求返回 true 允许表单提交return true;}/script
/body
/html 以上就是前端开发中关于表单内容使用的详细介绍涵盖基本结构、常见表单元素、提交、验证和重置等方面。
