html form表单的概述和用法

2023-06-20 15:12

短信预约 -IT技能 免费直播动态提醒

这篇文章主要介绍“html form表单的概述和用法”，在日常操作中，相信很多人在html form表单的概述和用法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”html form表单的概述和用法”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

一，表格标签

向网页中加入表格

–1，概述

<!DOCTYPE html><html><head><meta charset="utf-8"><title>测试 表格标签</title></head><body><!-- 展示一个3行3列的表格 --><!-- table是表格标签，bgcolor设置背景色 width是表格的宽度 border是表格的边框 cellspacing是单个元的间距  --><table bgcolor="pink" width="300px" border="1px" cellspacing="0"><tr> <!-- tr是表里的行 --><td colspan="2">11</td> <!-- colspan合并列 --><td>13</td><!-- td是行里的列 --></tr><tr><td>21</td><td>22</td><td rowspan="2">23</td>  <!-- colspan合并行--></tr><tr><td>31</td><td>32</td></tr></table></body></html>

–2，总结

table 标签用来表示表格

tr 标签表示表里的一行

td 标签表示行里的列

border 设置边框

cellspacing 设置单元格的间距

bgcolor 设置背景色

width 设置宽度

height 设置高度

colspan 合并列

rowspan 合并行

二，表单标签

用来提交数据，本质上就是在一个表格标签的外面用form包起来

html form表单的概述和用法

–1，测试

<!DOCTYPE html><html><head><meta charset="utf-8"><title>测试 表单标签</title></head><body><form><table border="1px" bgcolor="lightgrey" bordercolor="red" cellspacing="0"><tr><td colspan="2"><h2 align="center">注册表单</h2></td></tr><tr><td>用户名：</td><td><input type="text" /></td></tr><tr><td>密码：</td><td><input type="password" /></td></tr><tr><td>确认密码：</td><td><input type="password" /></td></tr><tr><td>昵称：</td><td><input type="text" /></td></tr><tr><td>邮箱：</td><td><input type="email" /></td></tr><tr><td>性别：</td><td><input type="radio" />男<input type="radio" />女</td></tr><tr><td>爱好：</td><td><input type="checkbox" />篮球<input type="checkbox" />足球<input type="checkbox" />乒球</td></tr><tr><td>城市：</td><td><select><option>北京</option><option>上海</option><option>山东</option><option>东北</option></select></td></tr><tr><td>头像：</td><td><input type="file" /></td></tr><tr><td>验证码：</td><td><input type="text" /><img class="lazy" data-src="a.png"><input type="button" value="点我换一张" /></td></tr><tr><td>自我描述：</td><td><textarea>请输入自我描述~~</textarea></td></tr><tr><td colspan="2" align="center"><input type="submit" value="提交"/><input type="button" value="重置"/></td></tr></table></form></body></html>

–2，总结

form标签用来提交表单里的数据

table标签用来实现表格

tr标签用来表示表格里的行

td标签表示行里的列

img标签表示插入图片

select标签表示下拉框，option是下拉选项

textarea标签是文本域

input表示输入框，类型很丰富

text类型是普通的文本输入框

password是密码输入框

email是邮箱的输入框

file是上传文件

radio是单选框

checkbox是多选框

button是普通的按钮

submit是提交按钮，比button多了数据提交的功能

align属性用来设置元素的位置center是居中

bordercolor设置边框的颜色

–3，form提交数据

–1，提交按钮必须submit类型，不然不会提交数据的

–2，哪些数据需要提交的话，必须在网页上配置name属性

–3，提交的数据都在地址栏中展示 http://127.0.0.1:8848/cgb2105/html4.html?username=1314

username=1314 ，其中username是页面中name属性的值，1314是网页中输入的数据

<!DOCTYPE html><html><head><meta charset="utf-8"><title>测试 表单标签</title></head><body><!-- 默认会把数据在地址栏中拼接，，，，，GET方式提交数据 http://127.0.0.1:8848/cgb2105/html4.html?username=1&pwd=2&repwd=2GET方式提交数据：好处是展示的效果明确，坏处是不安全，地址栏太长POST方式提交数据：好处是安全对数据的大小没上线，坏处是看不见数据--><form method="post" action="http://www.baidu.com"><table border="1px" bgcolor="lightgrey" bordercolor="red" cellspacing="0"><tr><td colspan="2"><h2 align="center">注册表单</h2></td></tr><tr><td>用户名：</td><td><input type="text" name="username"/></td></tr><tr><td>密码：</td><td><input type="password" name="pwd"/></td></tr><tr><td>确认密码：</td><td><input type="password" name="repwd" /></td></tr><tr><td>昵称：</td><td><input type="text"  name="nick"/></td></tr><tr><td>邮箱：</td><td><input type="email" name="mail" /></td></tr><tr><td>性别：</td><td><!-- radio是单选，拥有相同的name值才能实现单选，不然就是双选了 必须设置value属性，否则永远提交on--><input type="radio"  name="sex" value="1"/>男<input type="radio"  name="sex" value="0"/>女</td></tr><tr><td>爱好：</td><td><!-- 拥有相同的name值，必须设置value属性否则提交的是on --><input type="checkbox"  name="like" value="1"/>篮球<input type="checkbox"  name="like" value="2"/>足球<input type="checkbox"  name="like" value="3"/>乒乒球</td></tr><tr><td>城市：</td><td><!-- 配置value属性，否则提交的是汉字，网络传输时字符串没有数字快 --><select name="city"><option value="1">北京</option><option value="2">上海</option><option value="3">山东</option><option value="4">东北</option></select></td></tr><tr><td>头像：</td><td><input type="file" name="head"/></td></tr><tr><td>验证码：</td><td><input type="text"  name="code" /><img class="lazy" data-src="a.png"><input type="button" value="点我换一张" /></td></tr><tr><td>自我描述：</td><td><textarea>请输入自我描述~~</textarea></td></tr><tr><td colspan="2" align="center"><input type="submit" value="提交"/><input type="button" value="重置"/></td></tr></table></form></body></html>

三，form表单的练习

html form表单的概述和用法

<!DOCTYPE html><html><head><meta charset="utf-8"><title>练习form表单</title></head><body><!-- 默认的数据提交是get方式 --><form><table><tr><td><h4>学生信息管理系统MIS</h4></td></tr><tr><td>姓名：</td></tr><tr><td><input type="text" placeholder="请输入姓名" name="user" /></td></tr><tr><td>年龄：</td></tr><tr><td><input type="number" placeholder="请输入年龄" name="age" /></td></tr><tr><td>性别：(单选框) <input type="radio" name="sex" value="1"/>男<input type="radio" name="sex" value="0"/>女</td></tr><tr><td>爱好：(多选) <input type="checkbox" name="like" value="1"/>乒乓球<input type="checkbox" name="like" value="2"/>爬山 <input type="checkbox" name="like" value="3"/>唱歌</td></tr><tr><td>学历：(下拉框) <select name="edu"><option value="1">本科</option><option value="2">专科</option><option value="3">高中</option><option value="4">小学</option></select></td></tr><tr><td>入学日期： <br/><input type="date" name="time"/></td></tr><tr><td><input type="submit" value="保存" /><input type="button" value="取消" /></td></tr></table></form></body></html>

四，CSS

-1，概述

用来修饰网页的，变得好看。层叠样式表stylesheet

-2，语法

td{ text-align : center; } 选择器{ 属性名 : 属性值 ; }

-3，入门案例

<!DOCTYPE html><html><head><meta charset="utf-8"><title>测试 css修饰网页</title><!-- css写法2：内部css，插入css代码 --><style>div{color:green; background-color: #008000;}</style></head><body><!-- css写法1：行内css--><div >我是div1</div><div  >我是div2</div> <div >我是div3</div><div>我是div4</div><div>我是div5</div></body></html>

五，选择器

<!DOCTYPE html><html><head><meta charset="utf-8"><title>测试 css的选择器</title><!-- style向HTML中嵌入css代码 --><style>  div{  background-color: #008000; color: black; font-size: 30px ; font-family: "宋体" ; }input{background-color: pink; }.a{ color: yellow;}#x{ font-size: 100px; }</style></head><body><!-- div span p input  --><div class="a">我是div1</div><div id="x">我是div2</div><div id="y">我是div3</div><span class="a">我是span1</span><span>我是span2</span><p class="a">我是p</p><input type="text" placeholder="我是input1"></input><input type="text" placeholder="我是input2"></input></body></html>

到此，关于“html form表单的概述和用法”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉