前端学习之HTML5 表单相关元素和属性

落日映苍穹つ 2023-05-22 08:45 8阅读 0赞

## 1.form元素： ##

> 属性：  
> 1.\*\*action：\*\*指定单击表单内的确认按钮，该表单被提交到哪个地址  
> 2.\*\*method：\*\*指定提交表单时发送何种类型的请求，默认get请求。建议发送POST请求  
> GET方式的请求：直接在浏览器地址栏中输入访问地址所发送的请求。弊端：可以在地址栏中看到请求参数名和值，且GET请求传送的数据量较小  
> POST方式的请求：通常使用提交表单的方式来发送。优点：传送的数据量较大，地址栏看不到请求的参数值，安全性较高  
> 3.\*\*enctype：\*\*指定对表单内容进行编码所使用的字符集  
> multipart/form-data：当需要通过表单上传文件时使用该属性值  
> text/plain：适用于直接通过表单发送邮件的方式，表单的action属性值为mailto  
> 4.\*\*name：\*\*指定表单的唯一名称，建议该属性与id属性值保持一致  
> 5.\*\*target：\*\*指定某种方式打开目标URL，该属性可以是\_blank、\_parent、\_self和\_top  
> 6.\*\*autofocus：\*\*打开页面自动获取焦点

## 2.input元素 ##

> 单行文本框：type属性为text  
> 密码输入框：type属性为password  
> 隐藏域：type属性为hidden  
> 单选框：type属性为radio  
> 复选框：type属性为checkbox  
> 图像域：type属性为image  
> 文件上传域：type属性为file  
> 提交、重设、无动作按钮：type属性分别为submit、reset、button  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQxOTIwMDY1_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQxOTIwMDY1_size_16_color_FFFFFF_t_70 1]

## 3.select与option元素 ##

<select … />用于创建列表框或下拉菜单，<option … />代表一个列表项或菜单项

> \*\*multiple：\*\*设置该列表框和下拉菜单是否允许多选，支持Boolean值得属性  
> \*\*size：\*\*指定该列表框内可同时显示多少个列表项

## 4.text area元素 ##

<texarea … />元素用于生成多行文本域

> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQxOTIwMDY1_size_16_color_FFFFFF_t_70 2]

## 5.fieldset与legend元素： ##

## 6.客户端校验 ##

> 3.4.1使用校验 属性执行校验  
> HTML5为表单控件新增了如下几个校验属性。  
> ➢required: 该属性指定该表单控件必须填写。该属性的值必须是required或完全省略属  
> 性值。.  
> ➢pattern: 该属性指定该表单控件的值必须符合指定的正则表达式。该属性的值必须是  
> 一个合法的正则表达式。  
> ➢min、max、step: 这3个属性只对数值类型、日期类型的<input…>元素有效，这3  
> 个属性控制该表单控件的值必须在min- -max之间，并符合step步长。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQxOTIwMDY1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200416211129344.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQxOTIwMDY1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQxOTIwMDY1_size_16_color_FFFFFF_t_70 1]: /images/20230521/720e7001fe24486dab3b1b99bb3de472.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzQxOTIwMDY1_size_16_color_FFFFFF_t_70 2]: /images/20230521/434ba194d11947629cb59e7c7e1e644b.png