表单、文件域、form表单域
属性 | 属性值 |
描述 |
text | 单行文本输入框 | |
password | 密码输入框 | |
radio | 单选按钮 | |
checkbox | 复选框 | |
type | button | 普通按钮 |
submit | 提交按钮 | |
reset | 重置按钮 | |
image | 图像形式的提交按钮 | |
file | 文件域 |
属性 | 属性值 | 描述 |
name | 由用户自定义 | 控件的名称 |
value | 由用户自定义 |
input控件中的默认文本值 |
size | 正整数 | input控件在页面中的显示宽度 |
checked | checked | 定义选择控件默认被选中的项 |
maxlength | 正整数 | 控件允许输入的最多字符数 |
⑴type属性(表单类型)
①这个属性通过改变值,可以决定你属于哪种 input 表单;
② type="text" 就表示文本框可以做用户名、昵称等;
用户名:<input type="text"/>
③type="password" 就是表示密码框,用户输入的内容是不可见的;
⑵value属性(文本值)
①value 默认的文本值,有些表单想打开页面就默认显示几个字,就可以通过这个value来设置;
⑶name属性(表单名字)(现在用的较少,学ajax和后台时是必需的)
①name表单的名字,后台可以通过这个name属性找到这个表单。页面中的表单很多,name主要作用就是用于区别不同的表单;
②name 属性后面的值,是我们自己定义的;
③radio 如果是一组,那我们必需给它们命名相同的名字 name,这样就可以多个选其中的一个啦。
④例子: <input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
⑷checked属性(默认选中)
①表示默认选中状态,较常见于单选按钮和复选按钮;
②默认选中了 男 这个选项:
如:<input type="radio" name="sex" value="男" checked="checked"/> 男
<input type="radio" name="sex" value="女" /> 女
㈢ label标签(理解)
1、目标:label 标签主要目的是为了提高用户体验,为用户提供最优秀的服务。
2、概念:label 标签为 input 元素定义标注(标签)。
3、作用:用于绑定一个表单元素,当点击 label 标签的时候,被绑定的单元元素就会获得输入焦点。
即,当我们鼠标点击label标签里面的文字时,光标会定位到指定的表单里面。
4、绑定元素的方法:
⑴方法一:用 label 直接包括 input 表单(适合单个表单选择)
如:<label> 用户名:<input type="radio" value="请输入用户名" name="username"/> </label>
⑵方法二:for 属性规定 label 与哪个表单属性绑定
如:<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
㈣ textarea控件(文本域)
1、语法:<textarea cols="每行中的字符数" rows="显示的行数">
表单 | 名称 | 区别 | 默认值显示 | 用于场景 |
input type="text" |
文本框 | 只能显示一行文本 | 单标签,通过value显示默认值 | 用户名、昵称、密码等 |
textarea | 文本域 | 可以显示多行文本 | 双标签,默认值写到标签里 | 留言板 |
㈤ select下拉列表
1、目的:如果有多个选项让用户选择,为了节约空间,我们可以使用select控件定义下拉列表。
2、语法:<select>
属性 | 属性值 | 作用 |
action | url地址 | 用于指定接受并处理表单数据的服务器程序的url地址 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单 |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库