HTML表单

懒洋洋大魔王

于 2024-09-02 08:41:20 发布

阅读量449

点赞数 19

分类专栏： HTML 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/QAZ412803/article/details/141802906

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.表单组件

<span>:文本标签（没作用主要给文本加其他属性）

<label>:文本标签（没作用主要给文本加其他属性）

<form>:表单标签

action 提交路径 method 提交方式（get|post）

<button>:按钮标签

<select>...<option>:下拉框（下拉列表） selected 设置默认值

<texarea>:文本域|多行文本框 cols设置宽度 rows设置高度

<input/>:

name:设置名字

size：设置大小

maxlenth：设置最大字符数

minlength:设置最小字符数

2.type:文本类型

text：文本框|输入框（默认值）

password：密码框

radio：单选按钮 name属性值必须一致 checked默认选择

checkbox：复选框|多选框 name属性值必须一致 checked默认选择

button普通按钮

image：图片按钮

reset:重置按钮(清空按钮)

submit：提交按钮

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <form action="sv" method="get">
           姓名：
           <input name="xingming" type="text"/>
           <br />

           密码：
           <input name="mima" type="password" />
           <br />

           性别：
           <input type="radio" name="a" checked="checked"/>男
           <input type="radio" name="a" />女
           <br />

           爱好:
           <input type="checkbox" name="b" checked="checked"/>唱

           <input type="checkbox" name="b" />跳

           <input type="checkbox" name="b" />篮球

           <br />

           <button>按钮</button>

           <input type="button" value="普通按钮" />

           <input type="image" src="img/renren.gif" name="zhuce"/>

           <input type="reset" name="chongzhi" value="重置按钮" />

           <input type="submit" name="tijiao" value="提交按钮" />

       </form>
   </body>
</html>

file：文件域必须在form标签中添加enctype=“multipart/form-data”

email：邮箱

url：网址

search:搜索框

number：数字框 min最小值 max最大值 step:步长（间隔长度）

range：滑块 min最小值 max最大值 step:步长（间隔长度）

tel：电话号

datetime-local：日期选择

color：选择颜色

hidden:隐藏域不显示

3.表单组件属性

readonly:只读可以选中但无法更改

disabled:禁用

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <form action="suibianxiede" method="get" >

           <button >按钮</button><button disabled>按钮</button>
       </form>
   </body>
</html>

4.表单验证

placehoulder:输入提示

requlred:非空验证

pattern:正则表达式校验

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <form action="suibianxiede" method="get" >
           文本框<input type="text" placeholder="请输入"/>
           文本框<input type="text" placeholder="请输入" required="required"/>
<button>按钮</button>
       </form>
   </body>
</html>