注册页面设计(表单基础)

HTML表单是网页中用于收集用户输入信息的区域,它包含了一系列交互控件,允许用户输入数据,并将这些数据发送到Web服务器进行处理。以下是HTML表单的基础知识:

一、表单的基本结构

HTML表单由<form>标签定义,表单的内容位于<form>标签的开始和结束之间。表单的基本结构如下:

<form action="url地址" method="提交方式" name="表单名称">  <!-- 表单控件 -->  
</form>

action属性:用于指定接收并处理表单数据的服务器程序的URL地址。
method属性:用于设置表单数据的提交方式,常用的有getpost两种。
name属性:用于指定表单的名称,以区分同一个页面中的多个表单。

二   表单控件(元素)

表单控件是用户与表单进行交互的组件,常见的表单控件包括:

文本框:用于输入单行文本

<input type="text" name="username">


密码框 :用于输入密码,输入的内容会以密文的形式显示

<input type="password" name="pwd">

单选按钮:用于在一组选项中选择一个

<input type="radio" name="gender" value="男">男  
<input type="radio" name="gender" value="女">女

复选框:用于在一组选项中选择多个

<input type="checkbox" name="hobby" value="足球">足球  
<input type="checkbox" name="hobby" value="排球">排球

下拉选择框:用于从下拉列表中选择一个选项

<select name="age">  <option value="18">18岁</option>  <option value="19" selected>19岁</option>  <option value="20">20岁</option>  
</select>

多行文本框:用于输入多行文本

<textarea name="message" rows="10" cols="30"></textarea>

文件上传框:用于上传文件

<input type="file" name="file">

按钮:包括提交按钮、重置按钮和普通按钮。

<input type="submit" value="提交">  
<input type="reset" value="重置">  
<input type="button" value="普通按钮">

三、表单的提交方式

  • GET方式:将数据附加在URL地址后面进行提交,适用于数据量较小且不需要保密的情况。GET方式的请求可以被缓存、保留在浏览器历史记录中,并能被收藏为书签。但GET方式请求的数据长度有限制,且安全性较差,因为所发送的数据是URL的一部分。
  • POST方式:将数据包含在HTTP请求的实体部分进行提交,适用于数据量较大且需要保密的情况。POST方式的请求不会被缓存、不会保留在浏览器历史记录中,也不能被收藏为书签。POST方式对数据长度没有要求,且比GET方式更安全,因为参数不会被保存在浏览器历史或Web服务器日志中。

四、表单的其他属性

  • readonly属性:将表单控件设置为只读,用户不能修改其中的内容。
  • disabled属性:将表单控件设置为禁用状态,用户不能与之交互。
  • required属性:指定表单控件为必填项,用户必须填写才能提交表单。
  • pattern属性:用于定义输入内容的正则表达式验证规则,确保用户输入的数据符合特定的格式。

五、表单的标注与分组

  • <label>标签:用于为表单控件提供描述信息,增强表单的可读性和用户体验。<label>标签的for属性应与表单控件的id属性值相同,以建立关联。
  • <fieldset><legend>标签:用于将表单内的相关元素进行分组,并为分组提供标题。<fieldset>标签定义了一个表单控件组,<legend>标签为<fieldset>定义了一个标题。

HTML表单是网页中用于收集用户输入信息的重要组件。通过合理使用表单控件和属性,可以创建功能丰富、用户友好的表单界面。

六   注册页面设计 

示例效果如下所示:

程序代码如下所示

<html>
<head><title>注册表单</title></head>
<body>
<h3>用户注册</h3>
<form>
学习经历:&nbsp
<input type="radio" name="xiaoxue"/>小学&nbsp
<input type="radio" name="chuzhong"/>初中&nbsp
<input type="radio" name="gaozhong"/>高中&nbsp
<input type="radio" name="daxue"/>大学&nbsp
<input type="radio" name="shuoshi"/>硕士&nbsp
</p>
<p>
爱好:&nbsp
<input type="checkbox" name="interest" value="C"/>唱歌&nbsp
<input type="checkbox" name="interest" value="T"/>跳舞&nbsp
<input type="checkbox" name="interest" value="K"/>看电影&nbsp
<input type="checkbox" name="interest" value="L"/>旅游&nbsp
<input type="checkbox" name="interest" value="Y"/>运动&nbsp
</p>
<p>
籍贯:&nbsp
<select name="from"/><option>甘肃</option><option>新疆</option><option>青海</option><option>宁夏</option><option>西藏</option>
</select>
</p>
<p>
技能:
<select multiple="multiple" name="jinen"><option>html</option><option>css</option><option>javascript</option>
</select>
</p>
<p>
</from>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/463109.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

003-Kotlin界面开发之声明式编程范式

概念本源 在界面程序开发中&#xff0c;有两个非常典型的编程范式&#xff1a;命令式编程和声明式编程。命令式编程是指通过编写一系列命令来描述程序的运行逻辑&#xff0c;而声明式编程则是通过编写一系列声明来描述程序的状态。在命令式编程中&#xff0c;程序员需要关心程…

OPENAI官方prompt文档解析

官方文档地址:https://platform.openai.com/docs/guides/gpt-best-practices 文档中文版来源:OpenAI 官方提示工程指南 [译] | 宝玉的分享 (baoyu.io) 1.写清楚说明 如果prompt给的范围十分模糊或是过于宽泛,那么GPT就会开始猜测您想要的内容,从而导致生成的结果偏离预期. …

代理IP地址和端口是什么?怎么进行设置?

保护个人隐私、突破地域限制、提升网络安全性是我们不断追求的目标。而代理IP地址和端口就是一种实现这些目标的重要工具。但是&#xff0c;你可能对它是什么&#xff0c;以及如何设置感到困惑。别担心&#xff0c;本文将为你揭开这些神秘的面纱&#xff0c;让你轻松掌握这项技…

【uniapp3】分享一个自己写的h5日历组件

简言 分享一下自己基于uniapp写的日历组件。如果不太满足你的需求&#xff0c;可以自己改造。 日历 实现分析&#xff1a; 页面显示 - 分为顶部显示和日历显示&#xff0c;我这里做了多行和单行显示两种情况&#xff0c;主要是当时看着手机的日历做的&#xff0c;手机上的…

rhce作业4

问题&#xff1a; 1.搭建dns服务器能够对自定义的正向或者反向域完成数据解析查询。 2.配置从DNS服务器&#xff0c;对主dns服务器进行数据备份。 配置&#xff1a; 主服务器配置 安装 关闭防火墙 主配置文件定义正反向解析域 正向解析资源记录文件 反向解析记录文件 重启…

MybatisPlus入门(八)MybatisPlus-DQL编程控制

一、字段映射与表名映射 数据库表和实体类名称一样自动关联&#xff0c;数据库表和实体类有部分情况不一样。 问题一&#xff1a;表名与编码开发设计不同步&#xff0c;表名和实体类名称不一致。 解决办法&#xff1a; 在模型类上方&#xff0c;使用TableName注解&#xf…

摩尔斯电码

偏方记忆法 F .._. 滴滴打滴 很费钱 F 费 R ._. 滴打滴 洗发水广告 滴答滴&#xff0c;滴答滴 大家好才是正的好 G 和Q 可以一起记忆有相通点 把G 也看成一个圈&#xff0c;相交的地方一个点&#xff0c;因为圈没满缺一个_ K 和 Y 可以一起记忆 把K躺着看…

Vue Router进阶详解

导航守卫 若依框架登录鉴权详解&#xff08;动态路由&#xff09;_若依鉴权-CSDN博客 完整的导航解析流程 导航被触发&#xff1a; 当用户点击页面中的链接、使用编程式导航&#xff08;如router.push或router.replace&#xff09;或手动输入URL时&#xff0c;导航流程被触发。…

如何在Linux命令行中使用GhatGPT

2、验明正身&#xff0c;证明我的所在地是国内 3、第一次提问 4、第二次提问 5、问他一首古诗 6、话不多说&#xff0c;现在来展示他的安装过程 7、输入GitHub的网址 https://github.com/aandrew-me/tgpt 8、详情页向下翻 9、到终端输入 下列命令&#xff0c;等待安装&#x…

iOS灵动岛动画小组件怎么播放动画

这个灵动岛相关的展示位置分几个地方&#xff1a; 紧凑型&#xff0c;最小化&#xff0c;扩展型&#xff0c;还有锁屏位置 我们先来看一下我这边实现的动画效果 demo下载&#xff1a; iOS灵动岛GIF动画 灵动岛样式 灵动岛有三种渲染模式&#xff1a; 第一种是 紧凑型&…

【electron+vue3】使用JustAuth实现第三方登录(前后端完整版)

实现过程 去第三方平台拿到client-id和client-secret&#xff0c;并配置一个能够外网访问回调地址redirect-uri供第三方服务回调搭建后端服务&#xff0c;引入justauth-spring-boot-starter直接在配置文件中定义好第一步的三个参数&#xff0c;并提供获取登录页面的接口和回调…

vscode makfile编译c程序

编译工具安装 为了在 Windows 上安装 GCC&#xff0c;您需要安装 MinGW-w64。 MinGW-w64 是一个开源项目&#xff0c;它为 Windows 系统提供了一个完整的 GCC 工具链&#xff0c;支持编译生成 32 位和 64 位的 Windows 应用程序。 1. 下载MinGW-w64源代码&#xff0c;如图点…

这个操作惊呆我了!海康存储 R1竟然可以这样部署Portainer

这个操作惊呆我了&#xff01;海康存储 R1竟然可以这样部署Portainer 哈喽小伙伴们好&#xff0c;我是Stark-C~ 最近到手了海康存储&#xff08;HIKVISION&#xff09;私有云R1 &#xff0c;该机的卖点还是很多的&#xff0c;比如优秀的做工&#xff0c;强大的配置&#xff0…

雷电模拟器ls内部操作adb官方方法

正常情况下&#xff0c;我们通过adb操作模拟器&#xff0c;如安装软件、运行shell命令等&#xff0c;但是用windows系统&#xff0c;adb就经常掉线&#xff0c;端口被占用&#xff0c;或者发现不到设备&#xff0c;对于调试或者自动化非常痛苦。就在雷电安装目录下&#xff0c;…

TS学习笔记

一、TS运行环境搭建 1、安装 安装命令 npm i -g typescript 第一步&#xff1a;新建index.html和demo.ts 第二步&#xff1a;在index.html引入demo.ts文件 第三步&#xff1a;运行TS的命令 tsc demo.ts 注意&#xff1a;运行命令后&#xff0c;会将ts文件转换成js文件 …

使用Jest进行JavaScript单元测试

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 使用Jest进行JavaScript单元测试 引言 Jest 简介 安装 Jest 创建基本配置 编写测试用例 运行测试 快照测试 模拟函数 代码覆盖率…

机器学习算法之回归算法

一、回归算法思维导图 二、算法概念、原理、应用场景和实例代码 1、线性回归 1.1、概念 ‌‌线性回归算法是一种统计分析方法&#xff0c;用于确定两种或两种以上变量之间的定量关系。‌ 线性回归算法通过建立线性方程来预测因变量&#xff08;y&#xff09;和一个或多个自变量…

Android中同步屏障(Sync Barrier)介绍

在 Android 中&#xff0c;“同步屏障”&#xff08;Sync Barrier&#xff09;是 MessageQueue 中的一种机制&#xff0c;允许系统临时忽略同步消息&#xff0c;以便优先处理异步消息。这在需要快速响应的任务&#xff08;如触摸事件和动画更新&#xff09;中尤为重要。 在 An…

突破职场瓶颈,实现个人成长

在职场生涯中&#xff0c;我们总会遇到各种各样的瓶颈。这些瓶颈如同成长道路上的荆棘&#xff0c;让我们感到困惑、焦虑甚至恐惧。然而&#xff0c;瓶颈并非无法逾越&#xff0c;只要我们掌握正确的方法&#xff0c;勇敢面对&#xff0c;就能顺利突破&#xff0c;实现个人成长…

ubuntu 24.04中安装 Easyconnect,并解决版本与服务器不匹配问题

下载安装包 下载地址 https://software.openkylin.top/openkylin/yangtze/pool/all/ 页面搜索 easyconnect 选择 easyconnect_7.6.7.3.0_amd64.deb安装 sudo dpkg --install easyconnect_7.6.7.3.0_amd64.deb卸载 sudo dpkg --remove easyconnect出现的问题 安装以后第…