HTML常用表单元素使用

HTML表单(form)是网页中最重要的交互元素之一,它可以让用户填写信息并向服务器提交数据,然后在服务器端进行处理。常用的表单控件有:

1.文本输入框:

placeHolder=“输入框提示” id=""id name=“输入框名字”
disabled=“禁用” readonly=“只读” repuired=“输入框必填”
hidden=“隐藏” pattern=“正则表达式” maxlength=“最大长度”
minlenght=“最小长度” size=“输入框的长度”>

效果图如下:
在这里插入图片描述

2.密码输入框:

<-input type=“password” values=“值”>

效果图如下:
在这里插入图片描述

3.邮箱输入框:

<-input type=“email” values=“值”>

效果图如下:
在这里插入图片描述

4.手机输入框:

<-input type=“tel” values=“值”>

效果图如下:
在这里插入图片描述

5.文件:

<-input type=“file” values=“值”>

效果图如下:
在这里插入图片描述

6.滑块:

<-input type=“range” values=“值”>

效果图如下:
在这里插入图片描述

7.搜索:

<-input type=“search” values=“值”>

效果图如下:
在这里插入图片描述

8.单选按钮:

<-input type=“radio” values=“值”>

效果图如下:
在这里插入图片描述

9.复选框:

<-input type=“checkbox” values=“值”>

效果图如下:
在这里插入图片描述

10.下拉框:

<-select name=“名字” id=“id”><-option values=“下拉框的值”><-/option><-/select>

效果图如下:
在这里插入图片描述

11.文本域:

<-textarea values=“值”>

效果图如下:
在这里插入图片描述

12.提交:

<-input type=“subit” values=“提交”>

效果图如下:
在这里插入图片描述

13.重置:

效果图如下:
<-input type=“reset” values=“重置”>
在这里插入图片描述

14.按钮:

<-input type=“button” values=“按钮”>

效果图如下:
在这里插入图片描述

这些元素和属性可以在HTML中灵活使用,以满足不同的表单需求。
如有遗漏欢迎评论区补充哈~

你可能感兴趣的:(html,前端,javascript)