表单元素初识
我们在浏览网页时会经常遇到注册会员的界面，大概像这个样子：
或填写问卷的情况，大概像这个样子：
我们把这些内容称之为表单。
如何向自己的页面中添加表单呢？
添加表单的操作和添加表格类似。
首先我们要在页面中写入<form></form>标签，这是向浏览器声明这里是个表单，它本身并不会显示在页面中，但是可以全局控制表单元素的一些属性，就像表格中的<table></table>标签。
然后再在<form></form>中写入<input/>标签，这个标签的内容就会显示在页面中了，就像表格元素中的<tr><td>标签。不同的是<input/>没有结尾标签。
下面让我们写一写。
首先复制”第一个页面.html”文件。改名为”表单.html”，然后清空<body></body>中的内容，将<head></head>中间的<title></title>中间的内容改为”表单”，这样方便我们查看测试页面。
示例代码如下：
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE HTML> <html> <head> <title>表单 </title> </head> <body> </body> </html> |
下面我们要写入表单内容，示例代码如下：
|
1 |
<form> <input/></form> |
页面效果如下：
只有一个输入框。下面，我们为输入框添加名称”会员名称：”，示例代码如下：
|
1 |
<form> 会员名称： <input/></form> |
效果如下：
这样我们就写出了一个简单的表单，如果为表单添加更多内容和设置，就要继续了解表单的属性。
表单元素属性1
<input/>标签通过改变type属性可以变换出不同功能，在页面制作中，我认为<input/>标签中的type属性最重要。
下面我们来看一下type属性不同的值。
图片来源W3School
输入文字：首先，先来看text值。说明很明确，这个属性值的<input>标签主要是用来输入文本，比如”会员名称。”
示例代码如下：
|
1 |
<form> 会员名称： <input type="text"/></form> |
页面效果如图所示：我胡乱输入了几个字母
如果不指定type的text值的话，表面看起来并不影响输入内容，但是表单的内容最终是要提交到服务器的，如果不注明type=”text”，服务器就不能判断你输入的字符到底是一段代码还是一段字符串组成的文本，因此，我们为了让提的交数据在服务器端能被准确识别，一定要写好type的属性。
除此之外变换type值也能为<input/>变换不同功能。
制作提交按钮：例如”submit”（提交）。在我们输入完表单内容后，一般都有一个提交按钮，这个提交按钮也是由<input/>标签来完成的。
示例代码如下：
|
1 |
<form> 会员名称： <input type="text"/> <input type="submit"/></form> |
如图所示：
因为<input/>是内联元素，所以”submit”按钮会和之前的<input>显示在一行，换行的话很简单，可以使用<br>标签。
大家观察一下发现，我们并没有给”submit”按钮指定文字，在按钮上却出现了”提交查询”的字样，这是html默认的，如果我们要改变按钮文字就要使用value这个属性。示例代码如下：
|
1 |
<input type="submit" value = "提交"/> |
页面效果如下：
其实我们在输入文字时，输入框里会经常有提示文字，当我们点击输入框时，提示文字消失了，这个功能怎么实现？
这又涉及到一个新属性，叫做”placeholder”（提示文字）。
示例代码如下：
|
1 |
<input type="text" placeholder = "请输入英文或汉语拼音"/> |
页面效果如下：
下面我们来练习一下，示例代码如下：
|
1 2 3 4 5 6 |
<form> 会员名称： <input type = "text" placeholder = "请输入英文或汉语拼音"/><br> 会员密码：<input type = "text" placeholder = "请输入英文字母、特殊符号、数字"/><br> 确认密码：<input type = "text" /><br><input type = "submit" value = "提交"/><br> </form> |
页面效果如下：（想把密码字符显示为小圆点的读者可以先去属性值列表中找找”password”看看，咱们后面会细致讲解）
制作多选表单：多选表单的type属性值是”checkbox”。
我猜大家也猜到该怎么写了，示例代码如下：
|
1 2 3 4 5 6 7 8 9 |
<form> 兴趣爱好：<br> <input type = "checkbox" name="hobby" value = "reading"/>读书 <input type = "checkbox" name="hobby" value = "film"/>电影 <input type = "checkbox" name="hobby" value = "painting"/>绘画 <input type = "checkbox" name="hobby" value = "music"/>音乐 <br> <input type = "submit" value = "submit"/> </form> |
页面效果如下：
大家可以点点试试，可以多选了。如图：
这时小伙伴们会发现在这组示例中，出现了name和value两个属性。
先说value，在”submit”中，value的值也就是”提交”二字，是直接显示在按钮上的，而这里的value值却没有显示，显示出来的是我们在<input/>标签后面输入的”读书、电影、绘画、音乐”这样的字样。也就是说这里的value不会显示为选框的名字！
那value属性是干嘛的呢？实际上”checkbox”属性下的value属性值是写给后台的服务器看的。
我们向服务器提交选择后，服务器把name的名称作为数据的大类名称，把value值作为大类中的子类名称来存储或分析数据。
比如这个选择表单是有关兴趣爱好的，因此数据的大类属于”爱好”（hobby），即name=”hobby”，hobby中又分为”reading”（读书），”film”（电影），”painting”（绘画），”music”（音乐），即value=”reading”、value=”film”等等。这样不同用户的不同选择就按照这个数据组织方式提交给了服务器。
大家明白了吗？
另外需要说明的是，name和value最好使用英文或拼音来书写！
虽然我们目前不涉及后端服务器上的操作，但是在学习时要养成规范书写的习惯。
其实，除了type=”submit”的情况外，其他需要输入信息的type属性类型都是要写name属性的，不过不同type属性类型的value却不太一样。
下面我们来看看type=”text”时的标准写法：当type=”text”的时候，不必写value属性，因为value值为用户输入的内容
|
1 2 3 4 5 6 7 8 |
<form> 会员名称： <input type = "text" placeholder = "请输入英文或汉语拼音" name="memberName"/><br> 会员密码： <input type = "text" placeholder = "请输入英文字母、特殊符号、数字" name="passWord"/><br> 确认密码：<input type = "text" name="confirmPassWord"/><br> <input type = "submit" value = "提交"/><br> </form> |
今天的内容先到这里，我们明天继续讲解”表单元素”。
本文来自作者:路逸轿运-，不代表小新网立场！
转载请注明：https://www.xiaoxinys.cn/598924.html
相关推荐
-
1988年葛优早期演农村题材电影（还能认出这是葛优吗）
观众喜欢“葛大爷”，葛优，因他的电影幽默风趣，有内涵。 葛优电影《活着》、《甲方乙方》、《夜宴》、《非诚勿扰》、《赵氏孤儿》等。 今天小编给大家说的是：年轻时候葛优在电影《私奔》中…
-
淘宝上面怎么开店铺（淘宝上面怎么开店铺收钱吗）
开淘宝店的门槛看起来很低，单纯开个店不要钱，等你要卖东西的时候就要交个保证金。 但事实上很多人都不敢淘宝，那是因为承受不起要投入资金不等的运营推广费用，同时还要背负产品买不出去的风…
-
软件管家哪个好用（电脑软件管家排名）
现在很多公司都在做 sCRM管理软件，但是想要真正的实现数字化变革，并不是光靠 scrm管理软件就能做到的，而是需要 saas服务商为企业提供可落地执行…
-
福州市新冠病毒疫情最新数据（连江县地图高清版大图）
福州市新型冠状病毒肺炎疫情分区分布情况 （截至2月19日24时） 根据国家和我省应对新冠肺炎疫情分区分级管理要求，并结合我市疫情特点，落实科学精准防控，将我市各县（市）区划分为低风…
-
冰雪运动人才发展论坛筹备
新华社哈尔滨２月２３日电 题：“田间地头挖不到人”折射冰雪体育人才选拔困境 ——冰雪人才调研组稿之一 新华社记者王君宝 回忆四五年前，刘成龙略有些怀念。作为一名基层高山滑雪教练，他…
-
怎样才能做好销售（怎么做一个合格的销售）
内容来源：量见云课堂App开展的系列直播，由笔记侠合作整理。 大家好，我今天分享的主题是《大客户销售的成长之路》，主要讲4大部分：大客户销售的三个角色；销售的三个层次；拜访客户前的…
-
欧洲最值得去的国家，旅游的最佳时间
这些欧洲国家都可以去了，好激动， 憋死人了，走起。 有的国家还可以加急，太给力了。 我2个朋友还都办出来了法国旅游一年多次的。吼吼 先分享几个景点： 1.爱琴海 真是个浪漫的好地方…
-
女人夏天用什么护肤品最好的
闷热的夏季护肤，很多姐妹都抛弃了质感厚重的面霜，改用水乳套装了。现在市面上的水乳套装护肤功效也是非常多样，只有我们有需求，都可以选到适合自己的产品。 两者搭配护肤功效堪比经典面霜，…
-
一个很冷门的百度引流技巧，搭配变现单笔轻松赚100+
随着抖音和微信加大对搜索引擎的开发，百度的市场份额被瓜分了一部分，但是百度这个流量入口还是不能忽视，百度霸屏引流的效果还是不错的。 武哥自13年入互联网以来，就一直比较推崇百度霸屏…
-
中国舰队有哪些（人民解放军海军福建舰介绍）
2022年6月17日，我国第三艘航空母舰正式命名为“中国人民解放军海军福建舰” 舰艇包括航空母舰、驱逐舰、护卫舰、布雷舰、扫雷舰等。 航空母舰，简称“航母”，是一种以舰载机为主要武…
-
湖人官宣签下德拉蒙德（詹姆斯谈拒绝续约湖人）
再见德拉蒙德！湖人正式终止续约谈判，沃格尔：他不适合浓眉大眼 湖人队不理想的战绩和詹姆斯以及浓眉受伤有关外，还和德拉蒙德密切相关，从加盟湖人那一刻开始，除了与篮网队的…
-
清明节的画怎么画，好看的清明节踏青图片素材
身边的绿草郁郁葱葱 阳春三月,生气始盛,万物萌生 远处的山 层峦叠嶂 开始涂色吧 先铺满绿油油的青草 给叶子图上五颜六色的 生机勃勃 还有一只小黄狗 在草丛里尽情奔跑 接着图上淡淡…
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。