网站首页 > 技术文章 正文
我们在上网的时候,经常有一些登录界面进行输入账号和密码,以及我们在网上填一些信息,这些功能的实现都是通过表单来完成的,今天我们就来讲讲表单。
表单不是指一个标签,而是指一类标签。
我们表单里所有的内容都要写在<form></form>标签中 form的action属性是将表单所填的内容发送到想要发送的后台,而method属性有两个值,分别是get和post。get和post的主要区别是get表单所传的内容会在地址栏里显示出来,并且有长度限制,而post表单所传的内容不会在地址栏显示出来,并且可以视为没有长度限制。一般系统默认get。当然get和post的细区别还是有的,在这里我就不赘述了。
其中最重要的是<input>标签,input标签也是单标签。input标签的type属性值不同,其产生的作用也不同:如:<input type="text">产生的是文本框,一般都是我们登录时输入的账号那样的文本框。<input type="password">,产生的是密码框,一般都是我们登录时输入密码的那个框框。<input type="submit">产生的是提交框,一般是我们登录的那个按钮。这些标签都有value属性,但只有提交框用最合适用,因为文本框和密码框虽然也会展示出来,但效果却差强人意,我们一般都用placeholder属性替代它。
不知大家有没有在网上做过选择题,作者是做过的。网页中的选择题也是用的input。
input的type属性值还有radio,是单选框,有几个选项就写几个input,但要注意每一个input里都要写相同的name属性和属性值,这样的话浏览器才会知道这些是同一道题。
既然有单选题那一定也有多选题了,type的checked属性是多选框,其和单选的用法一样,也都要注意name一样的为一道题,还有一个属性是checked=“checked”,这个可以设定默认选择的选项。
我们也一定遇到过选择文字就能勾选而不用非得去点选框的情况,其实input选择框只有被点击的时候才能选中,但有的时候太小不容易点击甚至有的根本没有显示出来,这样的话用户体验就会非常的差,所以我们引进了一个标签:<label></label>标签,这个标签可以实现点击文字就进行选择的功能,用法就是将input标签和文字写在同一个label标签中,注意每一个选项写一起。
我们来看一下代码和结果:
作者已经尽量去说清楚了,欢迎大家批评指教,希望多多关注[送心]
猜你喜欢
- 2024-12-03 137.Python——PySide6:QInputDialog输入对话框的创建与使用
- 2024-12-03 云中忆低代码之【开关】组件
- 2024-12-03 微信8.0.28正式更新!发现6个实用功能,朋友圈新增访问权限
- 2024-12-03 Word文档如何不显示回车符?让你的文档更美观
- 2024-12-03 「Excel技巧」恼人的数据透视表之怎么去掉(空白)
- 2024-12-03 随手写个接口测试工具,让领导瞧瞧我的能耐
- 2024-12-03 topjui easyui:combobox(下拉列表应用)
- 2024-12-03 学会这两招,PS换行不求人!轻松实现文本排版,小白也能秒变高手
- 2024-12-03 如何在Excel中使用斜线,并在表格的标题中使用单斜线或双斜线
- 2024-12-03 哇塞!这款PPT插件简直太OK了!PPT新手狂喜!网友:就服气它
- 最近发表
- 标签列表
-
- cmd/c (90)
- c++中::是什么意思 (84)
- 标签用于 (71)
- 主键只能有一个吗 (77)
- c#console.writeline不显示 (95)
- pythoncase语句 (88)
- es6includes (74)
- sqlset (76)
- apt-getinstall-y (100)
- node_modules怎么生成 (87)
- chromepost (71)
- flexdirection (73)
- c++int转char (80)
- mysqlany_value (79)
- static函数和普通函数 (84)
- el-date-picker开始日期早于结束日期 (76)
- js判断是否是json字符串 (75)
- asynccallback (71)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- java (73)
- js数组插入 (83)
- mac安装java (72)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)