0314-form表单标签的使用

本文详细介绍了HTML表单中的各种元素及其用法,包括文本输入、密码输入、单选按钮、复选框、日期选择器等,并提供了示例代码。
代码:
<form>
<!--明文text-->
请输入账户名<input type="text"><br><br>
<!--暗文输入password-->
请输入密码<input type="password"><br><br>
<!--设置按钮,若设置只能选一个,所有标签添加name属性且值一样,在后面加checked="checked"设置默认值,
只能设置一个,若设置了多个,最后一个checked有效-->
性别:<input type="radio"name="a">男
<input type="radio"name="a">女
<input type="radio"checked="checked"name="a">保密<br><br>
<!--设置复选框,也可设置默认,方法同上-->
性取向:<input type="checkbox">男
<input type="checkbox">女(可多选)<br><br>
爱好:<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">羽毛球
<input type="checkbox">大保健(可多选)<br><br>
<!--还可以添加HTML5中的date的属性值来选择时间还有颜色,以及邮箱和电话号码等等,详情
http://www.w3school.com.cn/html5/html_5_form_input_types.asp-->
<label>请选择出生年月:<input type="date"></label><br><br>
<label>请输入邮箱:<input type="email"></label><br><br>
<label>请输入手机号:<input type="number"></label><br><br>
<label>请设置预留颜色:<input type="color"></label><br><br>
<!--按钮就是设置设置type的值是buttom,还可设置为reset用来重置已经输入的内容
信息用来提交到服务器,可设置为submit-->
<input type="button"align="center"value="注册"onclick="alert(250)">
<input type="reset">

<!--当然,可以使用图片作为按钮如下<input type="image" src="images/1.jpg">-->
</form>
想使用submit时,需要具备两个条件
1.需要给form表单添加一个action的属性,通过这个action属性指定需要提交到的服务器地址
<formaction="www.baidu.com"></form>
2.需要给需要提交到服务器的表单元素添加一个name属性
请输入账户名<input type="text"name="aa">
请输入密码<input type="password"name="bb">
其他标签:
可以给表单添加边框,格式:
<form>
<fieldset>
<legend>边框标题</legend>
</fieldset>
</form>
还可以给表单中添加多行输入框<textavea></textavea>,他有一些属性,例如限制行(cols)字数,满了则换行,同样,也能限制列数(rows),不过输入是无限循环的,示例如下:
请输入个人说明:<textarea cols="10" rows="1"></textarea></label>
在el-form表单中,常见的包含标签有`<el-form-item>`,以下是其使用方法和注意事项: ### 使用方法 #### 表单验证规则设置 可在表单的项 (`<el-form-item>`) 中单独设置验证规则,例如设置邮箱的验证规则: ```vue <el-form-item label="邮箱:" prop="email" :rules="[{ type: 'email', message: '邮箱格式错误', trigger: 'change' }]"> <el-input v-model="form.email"></el-input> </el-form-item> ``` 这里通过`prop`绑定表单数据的字段名,`rules`设置具体的验证规则,当用户输入的邮箱格式不符合要求,会显示相应的错误信息[^1]。 #### 使用el-row和el-col进行布局 为了实现表单的布局对齐,可以使用`el-row`和`el-col`组件。例如: ```vue <el-form :model="editInspectform"> <el-row style="margin-bottom: 20px"> <el-col :span="8"> <el-form-item label-width="120px" label="测试1:"> <el-input v-model="editInspectform.test1" disabled></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label-width="120px" label="测试2:"> <el-input v-model="editInspectform.test2" disabled></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label-width="120px" label="测试3:"> <el-input v-model="editInspectform.test3" disabled></el-input> </el-form-item> </el-col> </el-row> </el-form> ``` 这样可以将表单元素进行合理的布局,每个`el-col`代表一个列,`span`属性控制列的宽度[^3]。 ### 注意事项 #### 表单内联属性对宽度的影响 当`el-form`使用`inline`属性,`el-form-item`的宽度会失效。因此如果需要控制`el-form-item`的宽度,就不能使用`inline`属性,或者采用其他方式进行布局调整[^3]。 #### 标签宽度设置 为了保证`el-form-item`和它内部的`el-input`能在一行显示,需要设置`el-form-item`的`label-width`属性,明确标签的宽度,避免布局混乱[^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值