表单控件(表单元素)
在表单域中可以定义各种表单元素,表单元素其实就是用户网页体验当中在表单中输入或选择的内容控件。这些表单元素分为三大类:
input输入表单元素
select下拉表单元素
textarea文本域表单元素
表单元素中的<input>标签是用于收集用户信息。
<input>标签里包含了一个叫做type的属性,根据不同的type的属性值,输入字段可以有不同的形式(可以是文本字段,复选框,掩码后的文本控件,按钮等),type属性设置不同的属性值是用来指定不同的控件类型,语法格式如下:
<input type=“属性值”/>
type的属性值和属性值及描述如下:
![](https://i-blog.csdnimg.cn/blog_migrate/eade1ee2fa18aed502f9e35b713c34fe.png)
![](https://i-blog.csdnimg.cn/blog_migrate/40ec91444515c575ac22de64c6ede9df.png)
![](https://i-blog.csdnimg.cn/blog_migrate/869b5205193edaddd7a205c43061af8a.png)
除type属性外,<input>标签还有很多属性,name和value,前者主要用于多选一,后者用于提示输入规定的值。
name表单元素的名字,要求单选按钮和复选框都要有相同的name值。
另外一种是checked属性,这种属性是网页首次加载时应当被选中的值,简单来说就是默认值啦,
这个主要针对于单选按钮和复选框使用。
![](https://i-blog.csdnimg.cn/blog_migrate/642791d6aeaf137381ef68b2baaf86ab.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2551d60124ba42ed005936327d22ad4c.png)
还有一种是maxlength属性,是限制文本框的字符长度的,比如我们输入账号密码时都是用限制数字字母的数量的,开发时都是用这种去限制的。这个就不多说了。
下面回到type属性的属性值中,
还有两种属性值需要我们学习的,是属性提交和重置按钮。(submit和reset)
![](https://i-blog.csdnimg.cn/blog_migrate/d4e45cedf48fd895a54e97e25b6090ee.png)
![](https://i-blog.csdnimg.cn/blog_migrate/2a28c5d989beaa2065f411a52c78d4df.png)
如果想改掉“提交”,在后面添加value属性就好啦
![](https://i-blog.csdnimg.cn/blog_migrate/000de59081a7562fd944fad2ba4caa82.png)
![](https://i-blog.csdnimg.cn/blog_migrate/9ded83583553a9cbdaff07d8f5ca753f.png)
最后一种是reset属性,主要还原表单元素初始默认状态呢。
![](https://i-blog.csdnimg.cn/blog_migrate/a42a2d83b5d6bf7f9c148bb9345ec782.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5a713491368a4e17de8afb370d2c716c.png)
点击之后直接清掉原先输入的内容
![](https://i-blog.csdnimg.cn/blog_migrate/7144276558dcd6a4429eed80fb73b213.png)
由于笔者知识储备有限,暂时先说到这里了,其实后面的一些属性值,也要结合JavaScript才用到的,拜拜,明天见!2023年3月8日18:57:56