25 HTML5表单基本控件_二

2022-11-29 16:48:47 云平台 ℃

成长是一辈子的事儿！大家好！我是时问新。分享前端、Python等技术，以及个人成长路上的那些事儿。密码框使用<input>标签，把<input>标签上的type属性的值，设置为"password"，就可以创建密码框。密码框和单行文本框非常像，只不过，在单行文本框里面输入的内容，会显示出来，而在密码框里面输入的内容，都会变成小黑点隐藏起来。我还是接着在之前的"表单控件.html"这个页面上继续写代码(从密码框那里看就行了)： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <form action="" method="POST">  <p> 请输入你的名字：<input type="text"> </p> <p> 毕业学校：<input type="text" value="清华大学"> </p> <p> 邮寄地址：<input type="text" placeholder="请填写正确的地址"> </p> <p> 所学专业：<input type="text" value="金融工程" disabled> </p>  <p>  性别： <label> <input type="radio" name="sex" value="男" checked>男 </label> <label> <input type="radio" name="sex" value="女">女 </label> </p> <p>  血型： <input type="radio" name="bloodtype" checked id="A"><label for="A">A</label> <input type="radio" name="bloodtype" id="B"><label for="B">B</label> <input type="radio" name="bloodtype" id="AB"><label for="AB">AB</label> <input type="radio" name="bloodtype" id="O"><label for="O">O</label> </p>  <p>  我爱好的体育项目： <label> <input type="checkbox" name="hobby" value="MMA">MMA </label> <label> <input type="checkbox" name="hobby" value="羽毛球">羽毛球 </label> <label> <input type="checkbox" name="hobby" value="长跑">长跑 </label> <label> <input type="checkbox" name="hobby" value="游泳">游泳 </label> </p>  <p> 请输入密码： <input type="password"> </p> </form></body></html> 在浏览器中显示效果如下：我在浏览器页面上的密码框中随便输入密码，会隐藏起来变为小黑点。下拉菜单创建下拉菜单需要使用<select>标签，<select></select>标签对儿里面罗列的<option>标签是它内部的选项。也就是说，<option>标签是下拉菜单的选项。跟无序列表和有序列表一样：<select>标签的子标签只能是<option>标签，而且<option>标签也不能单独使用，只能把它放在<select>标签中使用。在<option>标签上，要有value属性，value属性的值是提交到服务器上的，而<option></option>标签对儿之间的内容才是显示给用户看的。每一个<option>标签上value属性的值不一定一样，value的值根据实际需要去设定。我继续在"表单控件.html"这个页面上写下拉菜单的演示代码： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <form action="" method="POST">  <p> 请输入你的名字：<input type="text"> </p> <p> 毕业学校：<input type="text" value="清华大学"> </p> <p> 邮寄地址：<input type="text" placeholder="请填写正确的地址"> </p> <p> 所学专业：<input type="text" value="金融工程" disabled> </p>  <p>  性别： <label> <input type="radio" name="sex" value="男" checked>男 </label> <label> <input type="radio" name="sex" value="女">女 </label> </p> <p>  血型： <input type="radio" name="bloodtype" checked id="A"><label for="A">A</label> <input type="radio" name="bloodtype" id="B"><label for="B">B</label> <input type="radio" name="bloodtype" id="AB"><label for="AB">AB</label> <input type="radio" name="bloodtype" id="O"><label for="O">O</label> </p>  <p>  我爱好的体育项目： <label> <input type="checkbox" name="hobby" value="MMA">MMA </label> <label> <input type="checkbox" name="hobby" value="羽毛球">羽毛球 </label> <label> <input type="checkbox" name="hobby" value="长跑">长跑 </label> <label> <input type="checkbox" name="hobby" value="游泳">游泳 </label> </p>  <p> 请输入密码： <input type="password"> </p>  <p> 请选择你最喜欢的新能源汽车： <select name="" id=""> <option value="特斯拉">特斯拉</option> <option value="小鹏">小鹏</option> <option value="蔚来">蔚来</option> <option value="威马">威马</option> <option value="理想">理想</option> <option value="雷丁">雷丁</option> <option value="比亚迪">比亚迪</option> </select> </p> </form></body></html> 在浏览器上显示效果如下：点击下拉菜单，用户可以在下拉菜单中进行选择。多行文本框使用<textarea></textarea>标签来创建多行文本框。 text是文本，area是区域，所以textarea就是文本区域，也就是多行文本框。 <textarea>的rows和cols属性 rows和cols这两个属性的值是数字，没有单位。 rows和cols这两个属性分别用来定义多行文本框的行数和列数，实际上就是定义多行文本框有多宽和多高。我接着写多行文本框的演示代码： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <form action="" method="POST">  <p> 请输入你的名字：<input type="text"> </p> <p> 毕业学校：<input type="text" value="清华大学"> </p> <p> 邮寄地址：<input type="text" placeholder="请填写正确的地址"> </p> <p> 所学专业：<input type="text" value="金融工程" disabled> </p>  <p>  性别： <label> <input type="radio" name="sex" value="男" checked>男 </label> <label> <input type="radio" name="sex" value="女">女 </label> </p> <p>  血型： <input type="radio" name="bloodtype" checked id="A"><label for="A">A</label> <input type="radio" name="bloodtype" id="B"><label for="B">B</label> <input type="radio" name="bloodtype" id="AB"><label for="AB">AB</label> <input type="radio" name="bloodtype" id="O"><label for="O">O</label> </p>  <p>  我爱好的体育项目： <label> <input type="checkbox" name="hobby" value="MMA">MMA </label> <label> <input type="checkbox" name="hobby" value="羽毛球">羽毛球 </label> <label> <input type="checkbox" name="hobby" value="长跑">长跑 </label> <label> <input type="checkbox" name="hobby" value="游泳">游泳 </label> </p>  <p> 请输入密码： <input type="password"> </p>  <p> 请选择你最喜欢的新能源汽车： <select name="" id=""> <option value="特斯拉">特斯拉</option> <option value="小鹏">小鹏</option> <option value="蔚来">蔚来</option> <option value="威马">威马</option> <option value="理想">理想</option> <option value="雷丁">雷丁</option> <option value="比亚迪">比亚迪</option> </select> </p>  <p> 留言： <textarea name="" id="" cols="30" rows="10"></textarea> </p> </form></body></html> 当你在vscode中写textarea然后按tab键时，会生成完整的<textarea>标签代码，生成的代码中默认会把cols的值给定为30，把rows的值给定为10。在浏览器中显示如下：当然，你可以自己调整cols和rows的值，多行文本框的宽高就会随着你的调整而变化。在多行文本框中，用户可以输入内容。三种按钮表单中常见的有三种按钮，它们也都是用<input>标签创建的，只不过type属性值不同，就表示不同的按钮。当<input>标签的type属性值为"button"时，就创建了一个普通按钮。也可以直接用<button></button>标签对儿来创建普通按钮。button这个单词就是按钮的意思。当<input>标签的type属性值为"submit"时，就创建了一个提交按钮。点击这个按钮时，表单将会提交到form标签的action属性值所指向的那个后台网站。submit这个单词就是提交的意思。当<input>标签的type属性值为"reset"时，就创建了一个重置按钮。点击这个按钮时，表单中的所有控件都将被立即重置。reset这个单词就是重置的意思。按钮上的value属性的值，就是显示在按钮上的文字。我接着写这三种按钮的演示代码： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <form action="" method="POST">  <p> 请输入你的名字：<input type="text"> </p> <p> 毕业学校：<input type="text" value="清华大学"> </p> <p> 邮寄地址：<input type="text" placeholder="请填写正确的地址"> </p> <p> 所学专业：<input type="text" value="金融工程" disabled> </p>  <p>  性别： <label> <input type="radio" name="sex" value="男" checked>男 </label> <label> <input type="radio" name="sex" value="女">女 </label> </p> <p>  血型： <input type="radio" name="bloodtype" checked id="A"><label for="A">A</label> <input type="radio" name="bloodtype" id="B"><label for="B">B</label> <input type="radio" name="bloodtype" id="AB"><label for="AB">AB</label> <input type="radio" name="bloodtype" id="O"><label for="O">O</label> </p>  <p>  我爱好的体育项目： <label> <input type="checkbox" name="hobby" value="MMA">MMA </label> <label> <input type="checkbox" name="hobby" value="羽毛球">羽毛球 </label> <label> <input type="checkbox" name="hobby" value="长跑">长跑 </label> <label> <input type="checkbox" name="hobby" value="游泳">游泳 </label> </p>  <p> 请输入密码： <input type="password"> </p>  <p> 请选择你最喜欢的新能源汽车： <select name="" id=""> <option value="特斯拉">特斯拉</option> <option value="小鹏">小鹏</option> <option value="蔚来">蔚来</option> <option value="威马">威马</option> <option value="理想">理想</option> <option value="雷丁">雷丁</option> <option value="比亚迪">比亚迪</option> </select> </p>  <p> 留言： <textarea name="" id="" cols="30" rows="10"></textarea> </p>  <p>  <button>我是一个普通按钮</button> </p> <p>  <input type="button" value="我是一个普通按钮"> </p> <p>  <input type="submit" value="提交表单"> </p> <p>  <input type="reset" value="重置表单"> </p> </form></body></html> 注：我这里在表单控件外面包裹一个p标签，是为了在浏览器中显示出来好看点。因为这些标签都是行内元素，所谓行内元素，就是在同一行内显示的元素。不加p标签，它们都会挤在一起，非常难看，给它们外面分别都加了p标签，就会换行显示。以上代码在浏览器中显示效果如下：当点击普通按钮时，也默认会有一个提交的操作，如何取消提交，需要JavaScript相关编程。先不用管它。当点击提交按钮时，页面的网址会自动变为form标签上action属性的值所表示的网址。到底表单是怎么提交的，这需要http以及后台的一些知识，等后面了解了ajax相关知识，自然就明白了。现在也不用管它。当点击重置按钮时，只要是在同一个form标签对儿里面的表单控件，都会自动重置掉。比如你在这个页面输入名字、毕业学校、邮寄地址、选择性别、血型、体育爱好、单行文本框和多行文本框都输入好内容，然后当你点击重置按钮时，这些表单控件都会重置。你可以自己试一试。 input标签的类型总结 input标签的type属性，不同的属性值就表示不同的表单控件。以上的表单控件都是用input标签创建的，另外多行文本框和下拉菜单不是用input标签创建的。这样就好记一些。以上这些表单控件的兼容性都很好，包括最老旧的ie6浏览器也是的。感谢阅读！知识总结不易，请点个赞或转发鼓励一下呗！想系统性学习前端的小伙伴可以我！