HTML（三） -- 表单设计
目录
1. 基本语法
2. 表单控件
2.1 input控件
input 常用属性：
input type的表单项：
2.2 select 控件
2.3 textarea控件
2.4 label 控件
为什么需要表单？
在我们网页中， 无论是提交搜索的信息，还是网上注册等都是需要使用表单。
使用表单目的是为了用户同服务器进行动态的信息交流。
1. 基本语法
HTML 表单是一种允许用户在 Web 页面上输入和提交数据的机制。
<form name="表单名称" method="指定传输方式" action="接纳表单数据地址" enctype="传输数据的编码格式">表单项、文字、图片等 </form>表单的常见属性：
属性 属性值 作用 name 名称 用于指定表单的名称，用以区分同一个页面中的多个表单 method get/post 设置表单数据的提交方式，取值为get或者post action url地址 用以指定接收并处理表单数据的服务器程序的url地址；为空则提交给当前页 enctype MIME type 指定传送数据的编码方式，默认值为application/x-www-form-urlencoded
示例演示：
<form name="aaa" method="post" action="result.html"><p> 名字：<input name="name" type="text" > </p><p> 密码：<input name="pass" type="password" > </p><p><input type="submit" name="Button" value="提交"/><input type="reset" name="Reset" value="重填"/> </p>
</form>结果展示：
2. 表单控件
2.1 input控件
input 是输入的意思，而在表单元素中 <input> 标签用于收集用户信息 在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，展示不同的控件（如输入框、密码框、复选框、掩码后的文本控件、单选按钮、按钮等）。
input 常用属性：
属性 属性值 作用 type value 规定 input 元素的类型。 name field_name 定义 input 元素的名称 autofocus autofocus 规定输入字段在页面加载时是否获得焦点。 placeholder text 在输入域内给浏览者显示一段提示语句 required required 指示输入字段的值是必需的，不能为空 value value 规定 input 元素的值 autocomplete on/off 规定是否使用输入字段的自动完成功能 checked checked 规定此 input 元素首次加载时应当被选中。 disabled disabled 当 input 元素加载时禁用此元素。 pattern regexp_pattern 此属性相当于给input输入域加上验证模式，验证是为正则表达式 maxlength number 规定输入字段中的字符的最大长度。
input type的表单项：
表单项 作用 <input type="text"> 单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符 <input type="password"> 密码字段。该字段中的字符被掩码 <input type="submit"> 提交按钮，将表单里的信息提交给action所指向的地址 <input type="reset"> 定义重置按钮。重置按钮会清除表单中的所有数据 <input type="radio"> 定义单选按钮 <input type="checkbox"> 定义复选框 <input type="email" 邮件框，具有校验功能 <input type="image"> 定义图像形式的提交按钮 <input type="button"> 定义可点击按钮，没有任何行为（可通过 JavaScript 启动脚本） <input type="hidden"> 定义隐藏的输入字段 <input type="file"> 文件域
示例演示：
<form name="aaa" method="post" action="result.html"><p> 名字：<input name="name" type="text" > </p><p> 密码：<input name="pass" type="password" > </p><!-- 使用radio时，radio的name属性要一致 --><p>性别：<input name="radio" type="radio" checked> 男<input name="radio" type="radio" > 女</p><!-- 使用checkbox时，checkbox的name属性要一致 --><p>爱好：<input name="checkbox" type="checkbox" value="ball"> 打球<input name="checkbox" type="checkbox" value="swimming"> 游泳<input name="checkbox" type="checkbox" value="networkGame"> 网络游戏<input name="checkbox" type="checkbox" value="readABook"> 看书</p><p> 邮箱：<input name="email" type="email" > </p><p><input type="submit" name="Button" value="提交"/><input type="reset" name="Reset" value="重填"/></p>
</form>结果展示：
2.2 select 控件
在页面中，如果有多个选项让用户选择，并且想要节约页面空间时， 我们可以使用<select>标签控件定义下拉列表。
<select><option>选项1</option><option>选项2</option><option>选项3</option>... </select>注 ：在<option> 中定义 selected =“ selected " 时，当前项即为默认选中项。
示例演示：
<label for="fruits">请选择你喜欢的水果：</label><select name="fruits" id="fruits"><option value="" selected = "selected">请选择</option><option value="apple">苹果</option><option value="banana">香蕉</option><option value="orange">橙子</option><option value="grape">葡萄</option></select>结果展示：
2.3 textarea控件
<textarea> 标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
<textarea rows="3" cols="20">文本内容 </textarea>
2.4 label 控件
label 元素的特点：
- 不会向用户呈现任何特殊效果。
- 为鼠标用户改进了可用性。 如果您在 label 元素内点击文本，就会触发此控件。 就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
- <label> 标签的 for 属性应当与相关元素的 id 属性相同。
代码演示：
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />结果展示：
label 控件的使用效果
继续学习之路：
HTML（一） -- 基本标签
HTML（二） -- 表格设计
HTML（三） -- 表单设计
HTML（四） -- 多媒体设计
如果对你有帮助，请帮我点一下赞，我才有动力继续创作，谢谢！
HTML（三） -- 表单设计相关推荐
- yii2表单数据检查怎么自定义输出错误_B端产品日记——表单设计
编辑导语:表单在很多工作和项目中都会用到,在一个项目中,会涉及到大量的数据.信息等等,这时候用表单进行记录是很重要的:本文作者详细的介绍了在B端产品设计的工程中运用到的表单设计,我们一起来看一下. 人 ...
- 驰骋工作流引擎表单设计控件-字段类控件(2)
2019独角兽企业重金招聘Python工程师标准>>> Technorati Tags: 开源工作流引擎, 驰骋.net工作流引擎, 开源表单引擎, ccform, ccflow, ...
- 文本字段和表单设计-UI组件系列
重点 (Top highlight) Forms have existed for a significant amount of time, greatly simplifying the task ...
- html5中单选框被选中把值传给后台_HTML5的表单设计
使用过Delphi的程序员,对Form这个词应该比较熟悉.在Delphi中,Form被翻译为"界面.窗口",作用是:为用户提供界面,供用户输入信息,向用户展示处理结果. HTML5 ...
- B端页面——详细表单设计流程
一.什么是表单? 表单设计是B端产品设计的基础页面,想要做好表单设计首先要搞清楚表单的应用场景. 表单是用户采集数据信息的核心场景,同时又通过表单向用户展示数据信息,简而言之表单是用户与数据库之间的桥 ...
- B端——复杂业务表单设计
作者:nick (转载已取得作者授权) 一.前言 表单是B端产品中最常用的信息录入工具,但由于B端产品业务的复杂性,表单往往呈现出字段多.类型杂等特点,增大了它的设计难度:一个糟糕的表单,会极大影响用 ...
- 品高工作流 - 基于InfoPath的自定义表单设计教程
一. 摘要 InfoPath是企业级搜集信息和制作表单的工具,将很多的界面控件集成在该工具中,为企业开发表单提供了极大的方便.InfoPath文件的后缀名是.XML,可见InfoPath ...
- 表单设计中标签的布局方式有哪些
表单设计的标签本质上是一个与用户对话的起点,了解表单设计的标签的设置规则后,需要关注标签的布局方式,因为网页表单设计是影响用户如何回答问题的关键.表单设计标签的布局方式主要包含三种,测试数据展示,用户 ...
- react-sortablejs 实现自定义表单设计
一.业务需求描述 1. 能够拖动表单组件(不限制样式)到指定区域后,渲染成指定的组件 2. 能支持自定义标签名和属性,以及默认值 3. 能实现可支持预览.可排序.可编辑等功能 4. 能通过JSON数据 ...
最新文章
- EXE文件中的程序的加载过程 SA是什么呢？PSP是什么？
- java领域对象_java的几种对象(po,dto,dao等)
- centos7开放端口
- larvare数据库引入php_PHP全栈学习笔记6
- java数据库防火墙,数据库centos7防火墙导致java程序访问mongodb3.0.1时报错的问题分析...
- css里面的let,js中let和var定义变量的区别
- 2.6 更多导数的例子
- Windows Debugging之六
- PAT (Basic Level) Practice 1006 换个格式输出整数
- 生成对抗网络系列—CycleGAN
- 乐高积木格斗机器人组装拼图_玩积木、组装机器人的多重好处，你一定想不到！（认识机器人）...
- Cannot open include file: 'unistd.h': No such file or directory的解决办法
- 莫兰迪配色RGB对照表
- windows环境下neo4j下载安装配置
- Linux 安装kafka的库librdkafka
- 网站后台测试软件,WebCrack：网站后台弱口令批量检测工具
- 如何利用线程堆栈定位问题
- 【RDMA】RDMA通信测试工具|RDMA信息查询工具
- 广义根轨迹 matlab,根轨迹心得体会
- npm run dev命令报错解决方式