表单标签的相关属性

与模板相关的属性
属性数据类型说明
templateDirString指定模板的目录
themeString指定主题名称
templateString指定模板名称
与javaScript相关的属性
属性数据类型说明
onclickString指定鼠标左键在表单元素上单击时调用的javaScript函数
ondblclickString指定鼠标左键在表单元素上双击时调用的javascript函数
onmousedownString指定鼠标在表单元素上按下时调用的javascript函数
onmouseupString指定鼠标在表单元素上松开时调用的javascript函数
onmouseoverString指定鼠标在表单元素上悬停时调用的javascript函数
onmouseoutString指定鼠标在表单元素上移出时调用的javascript函数
onfocusString指定表单元素获得焦点时调用的javascript函数
onblurString指定表单元素失去焦点时调用的javascript函数
onkeypressString指定在表单元素上单击键盘上某个字符键时调用的javascript函数
onkeyupString指定在表单元素上松开键盘上某个字符键时调用的javascript函数
onkeydownString指定在表单元素上按下键盘上某个字符键时调用的javascript函数
onselectString对下拉列表项等可以选择的表单元素,指定选中该元素时调用的javascript函数
onchangeString对于文本框等可以输入的表单元素,指定当值改变时调用的javascript函数
与工具相关的属性
属性数据类型说明
tooltipString设置此组件的工具提示
tooltipConfigString配置工具提示的各种属性
设置表单元素的css样式
属性主题数据类型说明
cssClasssimpleString设置HTML表单元素的class属性
cssStylesimpleString设置HTML表单元素的class属性
titlesimpleString设置HTML表单元素的title属性
disabledsimpleString设置HTML表单元素的disabled属性
labelxhtmlString设置表单元素关联的label
labelpositionxhtmlString指定表单元素的label位置(top/left),默认值是left
requiredpositionshtmlString指定必填标记,默认以“*”作为必填标记
namesimpleString指定表单元素的name映射,该属性与action属性相对应
requiredxhtmlboolean是否在表单元素饿label上添加“*”号
tabindexsimpleString设置HTML表单元素的tabindex属性
valuesimpleString设置HTML表单元素的value属性
keysimpleString设置HTML表单元素对应的action属性名

所有的表单元素变迁都存在一个特殊的属性:form

通过${parameters.form.id}来取得表单元素所在表单的id

name属性会映射到Action中的属性名称,value属性则代表此属性的值

<!--将下面文本框的值绑定到Action的person属性的firstName属性-->

<s:textfield name="person.firstName" />

<!--使用表达式生成表单元素的值-->

<s:textfield name="person.firstName" value="${person.firstName}"/>

表单标签的相关属性

表单标签的相关属性

表单标签的相关属性
表单标签的相关属性

表单标签的相关属性

表单标签的相关属性

表单标签的相关属性

表单标签的相关属性

表单标签的相关属性

表单标签的相关属性




### JavaScript 中表单标签及其属性相关知识 #### 1. 基本概念 表单(`<form>`)是 HTML 页面中用于收集用户输入的重要部分。通过 `<form>` 标签,可以定义一组控件供用户填写并提交给服务器处理。常见的表单控件包括文本框、密码框、按钮等。 #### 2. 表单标签的主要属性 以下是 `<form>` 标签的一些重要属性: - **action**: 定义当表单被提交时,接收数据的 URL 地址。 - **method**: 指定发送表单数据的方法,通常为 `GET` 或 `POST`[^4]。 - **enctype**: 设置编码方式,默认值为 `application/x-www-form-urlencoded`。如果上传文件,则需设置为 `multipart/form-data`。 - **target**: 指定目标窗口或框架加载响应结果的位置,例如 `_self`, `_blank` 等。 - **novalidate**: 如果存在此属性,浏览器不会自动验证表单字段的内容。 #### 3. 输入控件及其常见属性 以下是一些常用的表单控件以及它们的关键属性: | 控件类型 | 描述 | 主要属性 | |----------------|--------------------------|-----------------------------------| | `<input>` | 提供多种类型的输入框 | `type`, `value`, `placeholder`, `required` | | `<textarea>` | 多行文本输入区域 | `rows`, `cols`, `maxlength` | | `<select>` | 下拉列表 | `multiple`, `size` | | `<option>` | 列表项 | `selected`, `disabled` | | `<button>` | 可点击按钮 | `type`, `disabled` | #### 4. 示例代码 下面是一个简单的表单示例,展示如何使用这些标签属性: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>表单示例</title> <style> .error { color: red; } </style> </head> <body> <form id="myForm" action="/submit_form" method="post" novalidate> 用户名:<input type="text" name="username" placeholder="请输入用户名" required><br><br> 密码: <input type="password" name="password" minlength="6" required><br><br> 邮箱: <input type="email" name="email"><br><br> 性别: <label><input type="radio" name="gender" value="male">男</label> <label><input type="radio" name="gender" value="female">女</label><br><br> 爱好: <label><input type="checkbox" name="hobby[]" value="reading">阅读</label> <label><input type="checkbox" name="hobby[]" value="sports">运动</label><br><br> 自我介绍:<br> <textarea name="introduction" rows="5" cols="30"></textarea><br><br> <input type="submit" value="提交"> </form> <script> document.getElementById('myForm').addEventListener('submit', function(event) { const username = document.querySelector('[name=username]').value; if (!username.trim()) { alert('用户名不能为空'); event.preventDefault(); // 阻止默认行为 } else { console.log('表单已成功提交'); } }); </script> </body> </html> ``` 上述代码展示了如何创建一个带有基本验证功能的表单,并利用 JavaScript 进一步增强其功能性[^5]。 --- ####
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值