HTML基础【5】:表单标签
表单标签
作用:用于收集用户信息,让用户填写、选择相关信息
格式:
<from>表单标签 </from>
注意事项:
- 所有的表单内容,都要写在form标签里面
- form标签中有两个比较重要的属性
action
和method
,但就现目前的知识储备而言暂时无法理解,所以放到后面的课程中讲解
input标签
如果说 td 是表格最核心的标签,那么 input 就是表单最核心的标签。input 标签有一个 type 属性,这个属性有很多类型的取值,取值的不同就决定了 input 标签的功能和外观不同
明文输入框
- 作用:用户可以在输入框内输入内容
账号:<input type="text"/>
暗文输入框
- 作用:用户可以在输入框内输入内容
密码:<input type="password"/>
给输入框设置默认值
账号:<input type="text" value="123"/>
密码:<input type="password" value="123"/>
规定输入字段中的字符的最大长度
账号:<input type="text" name="fullname" maxlength="8" />
单选框(radio)
- 作用:用户只能从众多选项中选择其中一个
- 单选按钮,天生是不互斥的,如果想互斥,必须要有
相同的name属性
<input type="radio" name="xingbie" /> 男 <input type="radio" name="xingbie" /> 女 <input type="radio" name="xingbie" /> 保密
多选框(checkbox)
- 作用:用户可以从众多选项中选择多个
- 复选框,最好也是有相同的 name(虽然他不需要互斥,但是也要有相同的 name)
<input type="checkbox" name="aihao"/> 篮球 <input type="checkbox" name="aihao"/> 足球 <input type="checkbox" name="aihao"/> 棒球
给单选、多选设置默认值
- 指定 radio 和 checkbox 默认值,前提是同一组内容必须设置相同 name 属性
<input type="radio" name="xingbie" checked="checked"/> 男 <input type="radio" name="xingbie" /> 女 <input type="radio" name="xingbie" /> 保密<input type="checkbox" name="aihao" checked="checked"/> 篮球 <input type="checkbox" name="aihao" checked="checked"/> 足球 <input type="checkbox" name="aihao"/> 棒球
label标签
- 作用:label 标签
不会向用户呈现任何特殊效果
。不过,它为鼠标用户改进了可用性 - 注意事项:
- 表单元素要有一个 id,然后 label 标签就有一个 for 属性,for 属性和 id 相同就表示绑定了
- 所有表单元素都可以通过 label 绑定
<!--给文本框添加绑定--> <label for="account">账号:</label> <input type="text" id="account" /><!--给单选框添加绑定--> <input type="radio" name="sex" id="man" /> <label for="man">男</label><!--给多选框添加绑定--> <input type="checkbox" id="basketball" /> <label for="basketball">篮球</label>
- 作用:label 标签
按钮
- 作用:定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)
<input type="button" value="点我" />
图片按钮
- 作用:定义图像形式的提交按钮
<input type="image" src="xxx.jpg" />
重置按钮
- 作用:定义重置按钮。重置按钮会清除表单中的所有数据
<input type="reset" />
- 注意事项:
- 这个按钮不需要写 value 自动就有 “重置” 文字
- reset 只对 form 表单中表单项有效果
提交按钮
- 作用:定义提交按钮。提交按钮会把表单数据发送到action属性指定的页面
<input type="submit" />
- 注意事项:
- 这个按钮不需要写 value 自动就有 “提交” 文字
- 要想通过 submit 提交数据到服务器, 被提交的表单项都必须设置 name 属性
数据列表
作用:给输入框绑定待选项
格式:
<datalist><option>待选项内容</option> </datalist>
如何给输入框绑定待选列表
- 一个输入框
- 一个 datalist 列表
- 给 datalist 列表标签添加一个 id
- 给输入框添加一个 list 属性,将 datalist 的 id 对应的值赋值给 list 属性即可
请输入你的车型: <input type="text" list="cars"><datalist id="cars"><option>奔驰</option><option>宝马</option><option>奥迪</option><option>路虎</option><option>宾利</option> </datalist>
多行文本框(文本域)
作用:textarea标 签用于在表单中定义多行的文本输入控件
- cols 属性表示 columns “列”,规定文本区内的可见宽度
- rows 属性表示 rows “行”,规定文本区内的可见行数
格式:
<textarea cols="30" rows="10">默认</textarea>
注意点:
- 可以通过 cols 和 rows 来指定输入框的宽度和高度
- 默认情况下输入框是可以手动拉伸的
<!--禁止手动拉伸--> <style type="text/css">textarea{resize: none;} </style>
下拉列表
作用:select 标签和 ul、ol、dl 一样,都是组标签。用于创建表单中的待选列表,可以从选择某一个带选项
格式:
选择籍贯: <select><option>北京</option><option>河北</option><option>河南</option><option>山东</option><option>山西</option><option>湖北</option><option>贵州</option> </select>
给下拉列表设置默认值
- 和 radio、checkbox 一样,select 也可以设置默认值,通过 selected 属性设置
<select><option>北京</option><option>河北</option><option>河南</option><option>山东</option><option>山西</option><option>湖北</option><option selected="selected">贵州</option> </select>
给下拉列表添加分组
<select><optgroup label="北京市"><option>海淀区</option><option>昌平区</option><option>朝阳区</option></optgroup><optgroup label="广州市"><option>天河区</option><option>白云区</option></optgroup><option selected="selected">贵州</option> </select>
转载于:https://www.cnblogs.com/qiuxirufeng/p/10158843.html
HTML基础【5】:表单标签相关推荐
- 【前端基础】表单标签/提交
[前端基础]表单标签/提交 表单标签 1. 表单的介绍 2. 表单相关标签的使用 3. 小结 表单提交 1. 表单属性设置 2. 表单元素属性设置 3. 示例代码 小结 表单标签 学习目标 能够知道表 ...
- CSS基础知识(表单标签、事件、CSS介绍、选择器、伪类选择器案例、样式、盒子模型、定位)...
一. 表单标签 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
- HTML 基础【2】 -- 表格标签 / 表单标签
请先学习往期内容:HTML 基础[1] – 入门介绍 / 基本结构 / 块级标签 / 行内标签 作业分析 上一篇<HTML 基础[1] – 入门介绍 / 基本结构 / 块级标签 / 行内标签&g ...
- HTML5基础学习——列表标签表单标签
学习内容: 1.列表标签 表格是用来显示数据的,那么列表就是用来布局的. 列表最大的特点就是整齐.整洁.有序,它作为布局会更加自由和方便. 根据使用场景不同,列表可以分为三大类:无序列表.有序列表和自 ...
- 什么标签用于在表单中构建复选框_基础表单标签及属性
表单标签 一.一个完整的表单包含三个基本组成部分:(表单标签.表单域.表单按钮) 1.表单标签:form标签,用于设置服务器地址.请求方式等等 2.表单域:用户需要填写或选择的数据,输入框.单 ...
- 04.HTML基础-表单标签基础标签
表单标签 什么是表单 表单就是专门用来收集用户信息的 什么是表单元素 是特殊的标签,在浏览器中所有的表三标签都有特殊的外观和默认的功能 作用:用于收集用户信息,让用户填写或选择相关的信息 格式: &l ...
- textarea中插入标签_HTMLCSS学习笔记(二)-- HTML表单标签
表单 1 : 表单标签 <form></form> 属性 : action = '接口地址' method = 'get / post' name = '表单名称' 2 : 表 ...
- java day32【HTML标签:表单标签 、CSS】
第一章 HTML标签:表单标签 * 表单: * 概念:用于采集用户输入的数据的.用于和服务器进行交互. * form:用于定义表单的.可以定义一个范围,范围代表采集用户数据的范围 * 属性: * a ...
- HTML——表单标签<form>与表单的实现
本人所用编辑器:vscode:使用浏览器为chrome 目录 1.基础知识 1.1基础知识详解 1.2action和method属性 1.3input标签 2.调查问卷的实现 2.1问卷及效果 2.2 ...
最新文章
- 好莱坞科幻新片《b》,钦定 AI 机器人出演女主角!
- Google更新最大的带注释图像数据集,添加本地化叙述
- SAP Spartacus 默认的 pwa,处于关闭状态还是打开状态?
- layer的删除询问框的使用
- Tcp与Ip协议的客户端和服务器编程
- Linux下安装FFmpeg
- 1053 Path of Equal Weigh(甲级)
- TypeScript完全解读(26课时)_14.ES6和Nodejs中的模块
- cent os mysql图形界面_cent os 6.4安装使用mysql
- 重新认识javascript的settimeout和异步
- SQK Server提示:安装程序无法与下载服务器联系。请提供 Microsoft R Open 和 Microsoft R Server
- 世界著名厂家单片机简介
- java中创建一个类
- 面向对象:兜兜转转了很久,希望你恰好也在
- abb机器人工具坐标系设定方式_实用 | ABB机器人如何设定工具坐标系?
- 流体力学发展史(转)
- VR学习第九节:VR+旅游 VR+房地产
- 超像素经典算法SLIC的代码的深度优化和分析。
- XSS挑战之旅 解题记录
- 论坛20大经典变态楼主主题和回复