表单、表格常用属性大全
html零基础必看——html入门，编程就是如此简单
第十二章：表单、表格标签
- 一、form表单
- 1.1 form表单标签
- 1.2 input 输入表单控件标签
- 1.2.1 text文本框
- 1.2.2 password密码框
- 1.2.3 radio单选框
- 1.2.4 checkbox多选框
- 1.2.5 普通按钮 提交按钮 重置按钮
- 1.2.6 image 图像提交按钮
- 1.2.7 css3新特性
- 2 `：focus`表单获得焦点时被选中
- 二、select下拉菜单
- 三、textarea 多行输入文本框
- 四、 表格
- 总结
一、form表单
表单主要是为了用户的信息，采集数据，将用户输入的信息发送到服务器，然后返回给登录接口。
1.1 form表单标签
用来标记一个表单，存储表单数据
语法格式：
<form action="" method="" name="" target="">表单内容</form>
form表单标签的一些属性：
- form 表单域
- action: 表示提交地址
- name:表单名称
- target: 提交完表单之后新页面在哪里打开。前面a链接里有讲到
1.2 input 输入表单控件标签
- input是行内元素，因此可以在一行显示。同时，input又是置换元素，因此支持宽高属性。（在前面第五章中： 二、行内元素有讲到，img、input都是行内元素，又是置换元素）
格式：<input type="输入控件类型" >
input 输入表单控件的一些属性：
- placeholder: 提示你要输入什么内容
- value: 表示控件里面默认输入的内容
- disabled: 禁止选中 你选择内容
- checked: 用在单选和多选身上 表示默认勾选
1.2.1 text文本框
格式：<input type="text" name= "username" id="" placeholder="" value="" size="" maxlength="" minlength="">
- name：文本框的名字，可以重复
- id： 也是文本框的名字，不可以重复
- placeholder ：提示你要输入什么内容
- value: 表示控件里面默认输入的内容
- size:文本框的宽度
- maxlength：文本框最大输入字符数
- minlength：文本框最小输入字符数
1.2.2 password密码框
格式：<input type="text" name= "username" id="" placeholder="" value="" size="" maxlength="" minlength="">
密码框和文本框属性、格式和文本框一样，只是密码框输入的内容会被小黑点代替
1.2.3 radio单选框
格式：<input type="radio" name="" checked vaule><label for="">单选项的名称</label>
- name：单选框的名字。注意：同一组单选框里面的每一组单选项的name名字必须一致
- checked：表示默认勾选该项选择的内容
- disabled: 禁止选中该项选择的内容
- vaule：单选框的预设值（向服务器提交数据时传递的值）
<label></label>标签 ：辅助input标签进行选择
1.2.4 checkbox多选框
格式：<input type="checkbox" name="" checked vaule><label for="">当前选项的名称</label>
- name：单选框的名字。注意：同一组复选框里面的每一组单选项的name名字必须一致
- checked：表示默认勾选该项选择的内容
- disabled: 禁止选中该项选择的内容
- vaule：复选框的预设值（向服务器提交数据时传递的值）
<label></label>标签 ：辅助input标签进行选择
<form action="">账号：<input type="text" name="username" placeholder="请输入账号" value="123456"><br><!-- 因为input是行内元素，不会自动换行，所以我们加上一个换行符 -->密码：<input type="password" name="password" placeholder="请输入密码" value="123456"><form action="">性别：<input type="radio" name="sex" checked><label for="boy">男孩</label><!-- 男孩里面加上了checked 表示默认勾选男孩 --><input type="radio" name="sex"><label for="girl">女孩</label><br>喜欢的科目：<input type="checkbox" name="subject" checked><label for="Chinese">语文</label><!-- 语文里面加上了checked 表示默认勾选语文 --><input type="checkbox" name="subject"><label for="math">数学</label><input type="checkbox" name="subject"><label for="English">英语</label><input type="checkbox" name="subject"><label for="physical">物理</label><input type="checkbox" name="subject" checked><label for="history">历史</label><!-- 历史里面加上了checked 表示默认勾选历史 --><input type="reset" value="重新选择"><!-- 默认值就是重置，此处通过value改变预设值 --></form>
1.2.5 普通按钮 提交按钮 重置按钮
botton：普通按钮（普通按钮可以通过js绑定脚本程序，完成一些操作，后要结合后面的js）结合js如：
<input type="button" value="给关闭" oncClick="WinClose()">submit：提交按钮，可以激发表单提交的动作 （结合后面js，如一些注册、登录功能的实现）
reset： 重置按钮，可以将表单恢复到初始的页面
这三种按钮都可以通过value属性指定按钮上显示的文字内容
1.2.6 image 图像提交按钮
格式：<input type="image" src="作为图像按钮的图片路径"> -->
<form action=""><input type="button" value="我是普通按钮"><br><input type="submit" value="我是提交按钮"><input type="reset" value="我是重置按钮"><!-- 使用图片作为提交1按钮的样式 --><input type="image" src="./img/2.jpg" width="30px" height="30px"></form>
效果图：
1.2.7 css3新特性
<form action=""><!-- 7.文件上传框file --><!-- css3新特性 --><!-- 文件上传 --><input type="file"><br> <!-- 日期选择框 -->请选择日期：<input type="date"><br><!-- 时间 -->请选择时间：<input type="time"><br><!-- 数字输入框 只能输入数字 字母e是特殊数字 -->请输入数字：<input type="number" placeholder="只能输入数字,字母e是特殊数字"><br>请滑动滑块验证：<!-- 数字滑块 --><input type="range"><br><!-- 颜色 -->请选择颜色：<input type="color"><br><!-- 电子邮件 -->请输入电子邮件：<input type="email" placeholder="请输入电子邮件"><br></form>
效果图：
2 ：focus表单获得焦点时被选中
鼠标点击表单控件输入框时，外面的输入框可通过css修改的样式显示。
只限于表单标签使用才会生效。
这段样式加入rest（1）.css外部样式里，引入就行 /* 清除默认焦点边框 */button,input{outline: none;}
格式：
选择器
：focus{/写样式/}
<style>/* 这段加入rest（1）.css外部样式里，引入就行 *//* 清除默认焦点边框 */button,input{outline: none;}.text{width: 200px;height: 50px;border: 1px solid red;}/* 点击表单控件 获取焦点选中鼠标点击表单控件输入框时，外面的输入框可通过css修改的样式显示*/.text:focus{border: 1px solid green;}</style>
</head>
<body>账号：<input type="text" name="username" class="text" placeholder="请输入账号"><br>密码：<input type="password" name="password" class="text" placeholder="请输入账号">
效果图：鼠标点击输入控件框时，这个控件框颜色会变成样式里面自己更改的颜色。
二、select下拉菜单
- select是一个容器元素，标记一个菜单或下拉列表。它所包含的option元素标记一个菜单或下拉列表中的每一项。
- 当select使用multiple属性时，用户可以同时选择列表中的多项内容
- option标记的selected属性指定该项被选取，默认是第一项被选取
- option标记的disabled属性指定该项不可用
<label for="season">请选择最喜欢的季节</label><select name="" id=""><option value="red">春天</option><option value="green">夏天</option><option value="blue" selected>秋天</option><!-- option标记的selected属性指定该项被选取，默认是第一项被选取 --><option value="white" disabled>冬天</option><!-- option标记的disabled属性指定该项不可用 --></select>效果图：
三、textarea 多行输入文本框
一般用于网页底部留言之类的多行输入文本框
格式：<textarea name="textarea" id="" cols="number" rows="number" placeholder="欢迎留言" readonly></textarea>
- textarea:伸缩文本框元素
- cols: 每一行中字符数量
- rows: 显示行数
- placeholder: 提示你要输入什么内容
- readonly：设定多行文本区只读，不能编辑和修改
<textarea name="textarea" id="" cols="number" rows="number" placeholder="欢迎留言" readonly></textarea>
效果图：鼠标点击右下角可以伸缩文本框大小
四、 表格
- table：表格标签，table标记代表一个表格
- tr：行 有多少个tr，就有多少行
- td ：单元格，一行里有多个td单元格构成
- th：表头 一般用于表格的第一行或第一列
- caption ：表格标题
<style>table {width: 300px;height: 50px;border: 1px solid red;}th,tr,td {width: 100px;height: 50px;border: 1px solid pink;text-align: center;}</style>
</head><body><!-- 定义表格 --><table><!-- 表格里面的一行 --><tr><!-- 表示单元格 --><td>123</td><td>123</td><td>123</td></tr><tr><td>你好</td><td>18岁</td><td>456</td></tr></table><!-- table 定义表格标签caption: 定义表格标题tbody: 表格内容 不写也会自动生成th:表头标签tr:表格一行 td:表示表格里一个单元格 必须嵌套在 tr中标签thead：代表表格头部tbody: 表格内容 不写也会自动生成tfoot：代表表格尾部--><table><!-- 定义这个表格标题 --><caption>老师调查表</caption><tr><!-- 表头 --><th>姓名</th><th>年龄</th><th>爱好</th><th>性别</th></tr><tr><!-- 单元格 --><td>小春</td><td>18岁</td><td>写代码</td><td>男</td></tr><tr><!-- 单元格 --><td>无限</td><td>19岁</td><td>喜欢漂亮小姐姐</td><td>男</td></tr><tr><!-- 单元格 --><td>夏栀老师</td><td>19岁</td><td>爱吃小龙虾 螃蟹</td><td>女</td></tr></table>效果图：
表格合并单元格：
合并单元格
公式: 合并单元格个数 - 1 = 删除个数
rowspan: 跨行合并 合并顺序是从上往下 合并的colspan: 跨列合并 先左后右
<style>table{width: 900px;border: 1px solid red;margin: 30px auto;/* 表格 单边框样式 */border-collapse: collapse;}tr,td,th{width: 350px;height: 60px;border: 1px solid #096;text-align: center;}</style>
</head>
<body><!-- 合并单元格 难点 --><table ><!-- 表格标题 --><caption>征婚表</caption><tr><th>姓名</th><th>性别</th><th>年龄</th><th>征婚条件</th></tr><tr><td>黄黄</td><td>男</td><td rowspan="3">21岁</td><!-- 这是跨行合并， 此处td rowspan="3"，后面删除两个第三列的td即可--><td>21岁-29岁 特征:美女</td></tr><tr><td>文文</td><td rowspan="2">女</td><!-- <td>21岁</td> --><td>22岁-28岁 特征:有钱</td></tr><tr><td>水水</td><!-- <td>女</td> --><!-- <td>21岁</td> --><td>22岁-28岁 特征:有钱</td></tr><tr><td>西西</td><td>男</td><td>22岁</td><td>21岁-30岁 特征:有钱 美女</td></tr><tr><td>南南</td><td>男</td><td>22岁</td><td>21岁-30岁 特征:有钱 美女 黑丝</td></tr><tr><!-- 这是跨列合并， 此处td colspan="4"，后面删除本行里的3个td即可--><td colspan="4">都喜欢漂亮的小姐姐</td><!-- <td>都喜欢漂亮的小姐姐</td><td>都喜欢漂亮的小姐姐</td><td>都喜欢漂亮的小姐姐</td> --></tr></table><!-- 合并单元格 公式: 合并单元格个数(2) - 1 = 删除个数 2rowspan: 跨行合并 合并顺序是从上往下 合并的colspan: 跨列合并 先左后右-->效果图：
总结
上述是小编为大家整理的form表单，以及input输入表单控件的一些类型、同时也补充了下拉菜单、多行文本输入框，最后还讲到表格、表格的单元格合并等结合相关案例做了一个比较详细的讲解。参考多方资料加上自己的理解整理出来的，或有不确之处和疏漏的地方，还望各位大佬能够不吝赐教，加以斧正，小编在此先行谢过了。
表单、表格常用属性大全相关推荐
- html表单的常用属性有哪些,html/form表单常用属性认识
1.form表单常用属性练习 .form1 { margin: auto; height: 900px; width: 500px; text-align: center; line-height: ...
- html表单的常用属性有哪些,整理HTML5中表单的常用属性及新属性
这篇文章主要介绍了使用HTML5进行SVG矢量图形绘制的入门教程,包括基本图形的绘制和简单的渐变效果等介绍,注意旧版本IE对其的支持并不好,需要的朋友可以参考下 HTML5 新的表单属性 HTML5 ...
- js操作元素：改变元素内容有两种方式： interText 和 innerHTML的区别， 常用的元素的属性操作， 仿电脑系统时间问好 ，表单元素的属性操作 ，案例：仿京东显示隐藏密码 ，样式属性操作
文章目录 操作元素 改变元素内容有两种方式: interText 和 innerHTML的区别 常用的元素的属性操作 案例:仿电脑系统时间问好 表单元素的属性操作 案例:仿京东显示隐藏密码 样式属性操 ...
- 用HTML制作表单表格能学到什么,Html学习之十七（表格与表单学习--排行版制作）...
表格与表单01 table{ width: 300px; height: 40px; margin: 100px auto; border-collapse: collapse; } .th2{ fl ...
- HTML 表单 表格 列表
目录 HTML 表单 type=" " 标签 文本域 密码字段 单选按钮 简单的下拉列表 提交按钮 重置 完整代码 HTML 表格 HTML 和表格边框属性 HTML 表格头 HT ...
- input 表单的type属性
实现日历效果 <input type="date" name="bday"><input type="datetime-local& ...
- oracle数据库表单,Oracle常用数据库系统表单以及SQL的整理
因为最近涉及到了一些数据库的归档,备份等工作,所以一部分的重心放在了数据库上,毕竟之前对数据库的了解也只停留在了一般的建表,查询,最多最多再写一写触发器之类的东西. 通常都是自己瞎搞搞,也就懂一点皮毛 ...
- html5 表单必填项,javascript - HTML5表单必填属性。 设置自定义验证消息？
javascript - HTML5表单必填属性. 设置自定义验证消息? 我有以下HTML5表格:[http://jsfiddle.net/nfgfP/] ***** 目前当我在空白时点击输入时,会出 ...
- Servlet的Web应用---三种方法获取表单的各种属性（源码）
闲话少说,切入正题. 一.最通俗的方法:request.getParameter("name属性") 源码: public void doPost(HttpServletReque ...
最新文章
- 关于uWSGI服务器的安装和启动（一）
- U-Boot 之五 详解 U-Boot 及 SPL 的启动流程
- Waiting for table metadata lock
- 在Android命令行启动程序的方法
- 在div中设置文字与内部div垂直居中
- 教你设置eclipse自动生成的author等注释
- 运行Java程序时 Tomcat出错 显示端口被占用
- 微型计算机原理控制,微机原理与控制技术(试题).doc
- 如何查看CSND私密文章
- 使用daemontools监控zookeeper,storm等进程
- 小程序-腾讯视频插件
- matlab绘制二元二次曲线图,Excel:关于二次曲线直角坐标方程图像的描绘
- 第一章：电商及商品系统概述
- 计算机病毒和木马完全相同,木马和计算机病毒的特点
- SAP HANA：下一代开放应用平台
- EasyExcel的简单使用记录
- CocosCreator之KUOKUO带你做双摄像机-单独渲染UI
- L3-1 千手观音【拓扑排序】
- 常见的几种身份验证方法
- proxycap不错