【入门级】HTML常用表单元素使用

不必再谢

已于 2023-12-19 10:50:07 修改

阅读量445

点赞数 8

文章标签： html 前端

于 2023-12-09 09:21:26 首次发布

本文链接：https://blog.csdn.net/nlfc47/article/details/134890705

版权

表单在网页中主要负责数据采集功能。HTML中的标签，就是用于采集用户输入的信息，并通过标签的提交操作，把采集到的信息提交到服务器端进行处理。
在某些应用登录上，使用表单，来输入相对信息，用于收集其信息，或者判断其有不有相对应的号等等。

<input type=“text” value=“值” >

<input type="password" value="值">

<input type="email" value="值">

 <input type="number" value="值">

<input type="tel" value="值">

<input type="url" value="值">

<input type="file" value="值">

<input type="range" value="值">

<input type="search" value="值">

<input type="radio" value="值">

<input type="checkbox" value="值">

<select name="" id="" >
<option value="值"></option>
</select>

<textarea value="值">

<input  type="submit" value="提交">

<input type="reset" value="重置">

<input type="button" value="值">

表单的以上所有表单元素的效果图:
在这里插入图片描述

<form action="">
<input type="text" maxlength="10"> <!--设置最大长度后，其文本输入的最大长度只能为指定的长度-->
</form>

<form action="">
<input type="text" minlength="6"> <!--设置最小长度后，其文本输入的长度起码都要大于设置的长度-->
<input type="submit">
</form>

运行结果:
在这里插入图片描述

<form action="">
<input type="text" placeholder="请输入你的姓名">
    <input type="submit">
</form>

运行结果:
在这里插入图片描述

<form action="">
    <input type="text" pattern="^[1-9]{6}"><!--这是我设置的正则，需要是数字并且长度要为6-->
    <input type="submit">
</form>

运行结果:
这是未达成我设置的格式的效果,而达成我设置的格式的将会提交上去。
在这里插入图片描述

<form action="">
    <input type="text" readonly=""><!--设置为只读，将只能看，而不能输入-->
    <input type="submit">
</form>

运行结果:
在这里插入图片描述
而反之没有设置只读的运行结果为:
(这个31为我自己输入的)

<form action="">
    <input type="text" >
    <input type="submit" disabled><!--设置为禁用，点击此按钮则无效-->
</form>

在这里插入图片描述

<form action="">
    <input type="text"  required><!--设置了必填，那此输入框就必须要输入-->
    <input type="submit" >
</form>

运行结果:
在这里插入图片描述

表单中的所有控件都可以用以上的常见属性。反正在使用时，有相对的要求的话，就直接使用就对了。

关注