html form写法,html之form表单

form表单

表单能够获取用户输入,用于向服务器传输数据,从而实现用户与web服务器的交互

表单属性

action

控制数据提交的地址,有三种书写方式:

不写 默认就是朝当前这个页面所在的地址i提交数据

只写路径后缀(/index/)

method

控制数据提交的方式,有get、post

form表单默认是get请求

input标签

type属性值

表现形式

text

单行输入文本

password

密码输入显示 为密文形式

date

日期输入框,可以选择日期

radio

加上name,单选框

button

普通按钮,没有实际意义,但是用的最多,可以绑定js事件

reset

重置按钮

submit

提交按钮,能够自动触发form表单提交数据的动作

checkbox

复选框

file

文本选择框

hidden

隐藏输入框

注意:能够触发form表单提交数据动作的标签有两个:

input标签的submit

button标签:我是一个button标签

通常情况下input需要结合label一起使用

b06ab731ad1728b707d5063f214f180d.png

表单中的input元素根据type参数不同,展示不同的功能:

password

a6a893267f7d6ce477cab5b3c13bc8eb.png

date

c3c8eae7bbf4a6596082736216fb3276.png

radio 单选框

submit 提交按钮

button 普通按钮

reset重置按钮

ba9424fb0cd070f8b348221b8db1cde4.png

4b74acb01ca8c4ddb09855633a60613a.png

ef386405b6fd3d08bf3e3b49a1d2ead2.png

注意:所有获取用户输入的标签 都应该有name属性

name属性就相当于字典的key

input框获取到的用户输入 都会放到input框的value属性中

input标签属性说明:

name:name属性就相当于字典的key

value: 表单提交时对应的值,input框获取到的用户输入 都会放到input框的value属性中

checked: 男 默认选中

readonly: 只读模式,不能修改

disabled: 禁用,所有input都适用

select标签

省份:

上海

北京

广州

深圳

动漫

鬼刀

灵笼

风云

一个个的option标签就是一个个的选项

属性说明:

multiple:布尔属性,设置后为多选,否则默认单选

disabled:禁用

selected:默认选中该项

value:定义提交时的选项值

textarea标签

多行文本

属性说明:

name:名称

rows:行数

cols:列数

disabled:禁用

element form表单校验是一种常用的前端表单校验方式,可以有效地对表单输入的内容进行验证,提高用户输入的准确性和数据的有效性。下面是element form表单校验的行内写法的解释。 Element form表单校验的行内写法主要是通过在input标签上添加相关属性来定义校验规则,实现对表单输入的校验。其中常用的属性包括:required、pattern、min、max、minlength、maxlength、type等。 首先,我们需要在input标签上添加required属性,用于设置必填项的校验规则。这样可以确保用户必须填写该字段,否则会弹出错误提示。 其次,我们可以使用pattern属性,通过正则表达式来定义输入内容的格式。例如,pattern="[a-zA-Z0-9]+"表示输入内容只能包含字母和数字。 另外,我们还可以使用min和max属性,用于限制输入的最小值和最大值。例如,min="1"和max="100"表示输入内容必须在1到100之间。 此外,如果我们需要限制输入内容的长度,可以使用minlength和maxlength属性。例如,minlength="6"和maxlength="12"表示输入内容的长度必须在6到12个字符之间。 最后,type属性可以用来指定输入内容的类型,例如email、tel、url等。这样可以对不同类型的输入进行相应的校验。 总的来说,element form表单校验的行内写法通过在input标签上添加相关属性,实现对表单输入的校验。这种写法简单方便,适用于表单校验需求简单的场景。但对于复杂的校验规则,建议使用element form表单校验的自定义写法,通过js代码来实现更灵活的校验逻辑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值