Box Input 表单域单元容器

2024-06-19 10:11:11首发，54年前更新

表单域容器是表单域的三级容器（一级是input、select等原生表单域，二级是被分装的AX-INPUT、AX-SELECT等组件），该容器是构成一个完整的form表单的基本单位，在表单域容器里包含的子元素有：input等原生元素或AX-INPUT等表单域组件，表单域校验模块，左侧label头，右侧help元素，下方alert元素。

基本结构

ceshi form容器主要_box-input、role=label、role=content、role=input和role=help三个部分组成。

输出
HTML

表头：

表单注解

必填
```
                
                
            
```

复杂结构

我们在role=input的三个方向提供了更多可用元素。

在下方：_valid、ax-alert、role=note等容器
在内侧：role=unit、_box-tools等容器
在右侧：role=disk、role=image、role=cube、role=text等容器

输出
HTML

表头：

正在校验...
KM

表头：

请注意文字格式...

表头：

正在校验...

获取手机号确认

表头：

正在校验...

右侧role=text是可换行的文本
```
                
                
            
```

所有表单域类型

_box-input表单域容器支持所有的原生表单域。辅助布局的标签有：_row（水平弹性布局）,_flex（弹性子元素）,ax-bc（垂直间距）,_grid（栅格布局）,ax-alert（警告）等。

表单容器不对type=submit/type=reset/button的宽度做处理，如果需要全宽的按钮，可追加_w-full样式类。

输出
HTML

姓名：

注意：最多10个汉字

必填

户型：

室

厅

卫

请选择我司最新研发的AI智能产品：

尺寸：

单位米

手机号：

验证错误

获取验证码

头像：

李勋

文件：

单选城市：

多选城市：

只选择1项么？

radio单选：

军事类人物志类娱乐类其他类
checkbox多选：
军事类

人物志类

娱乐类

文学类

小说类

教材类

动漫类

其他类
数量：

20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。

日期：

搜索：

颜色：

范围：

多行文本：

进度条：

评级：

按钮：
```
                
                
            
```

full通栏模式

_box-input表单域容器追加_in-full表示100%铺满父容器。full模式只是让中间的表单域宽度最大化，不对头尾做限制，看上去会有点凌乱，不过只要确保role=label的文本字数一致，起始看起来还算整齐的。

输出
HTML

姓名：

注意：最多10个汉字

必填

户型：

室

厅

卫

请选择我司最新研发的AI智能产品：

尺寸：

单位米

手机号：

验证错误

获取验证码

头像：

李勋

文件：

单选城市：

多选城市：

只选择1项么？

radio单选：

军事类人物志类娱乐类其他类
checkbox多选：
军事类

人物志类

娱乐类

文学类

小说类

教材类

动漫类

其他类
数量：

20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。

日期：

搜索：

颜色：

范围：

多行文本：

进度条：

评级：

按钮：
```
                
                
            
```

如果认为左侧role=label标签不整齐，可对标签直接使用style定义其width。

输出
HTML

姓名：

注意：最多10个汉字

必填

户型：

室

厅

卫

请选择我司最新研发的AI智能产品：

尺寸：

单位米

手机号：

验证错误

获取验证码
```
                
                
            
```

apart分离模式

_box-input表单域容器追加_in-apart表示分离role=label、role=help和role=content，让role=content和role=input真正通栏显示。

输出
HTML

姓名：

注意：最多10个汉字

必填

户型：

室

厅

卫

请选择我司最新研发的AI智能产品：

尺寸：

单位米

手机号：

验证错误

获取验证码

头像：

李勋

文件：

单选城市：

多选城市：

只选择1项么？

radio单选：

军事类人物志类娱乐类其他类
checkbox多选：
军事类

人物志类

娱乐类

文学类

小说类

教材类

动漫类

其他类
数量：

20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。

日期：

搜索：

颜色：

范围：

多行文本：

进度条：

评级：

按钮：
```
                
                
            
```

compact紧凑模式

_box-input表单域容器追加_in-compact表示紧凑模式，尽量节省空间，等同于移动端表单布局。

输出
HTML

姓名：

注意：最多10个汉字

必填

户型：

室

厅

卫

请选择我司最新研发的AI智能产品：

尺寸：

单位米

手机号：

验证错误

获取验证码

头像：

李勋

文件：

单选城市：

多选城市：

只选择1项么？

radio单选：

军事类人物志类娱乐类其他类
checkbox多选：
军事类

人物志类

娱乐类

文学类

小说类

教材类

动漫类

其他类
数量：

20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。

日期：

搜索：

颜色：

范围：

多行文本：

进度条：

评级：

按钮：
```
                
                
            
```

如果认为左侧role=label标签不整齐，可对标签直接使用style定义其width。

输出
HTML

姓名：

注意：最多10个汉字

必填

户型：

室

厅

卫

请选择我司最新研发的AI智能产品：

尺寸：

单位米

手机号：

验证错误

获取验证码
```
                
                
            
```

embed通栏模式

_box-input表单域容器追加_in-embed表示role=label将嵌入到input中，使用该布局模式需要两个条件：

仅对文本input和多行文本textarea有效，其他类型的表单域空间会错位
需要再_box-input元素上设置--_form-lbl-w该变量，建议使用em作为单位，1em为一个字符的宽度，因为label有padding，所以需要该变量需要适当调大一点。

输出
HTML

姓名：

注意：最多10个汉字

必填

产品：

尺寸：

单位米

手机号：

验证错误

获取验证码

头像：

李勋

数量：

20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。

日期：

搜索：

多行文本：
```
                
                
            
```

尺寸

_box-input表单域容器追加_in-sm表示小尺寸的表单，表单域普遍高28px；追加_in-lg表示大尺寸的表单，表单域普遍高48px。

我们通过一个示例演示不同尺寸和不同布局模式交叉使用的效果。

输出
HTML
JS

姓名：

注意：最多10个汉字

必填

户型：

室

厅

卫

请选择我司最新研发的AI智能产品：

尺寸：

单位米

手机号：

验证错误

获取验证码

头像：

李勋

文件：

单选城市：

多选城市：

只选择1项么？

radio单选：

军事类人物志类娱乐类其他类
checkbox多选：
军事类

人物志类

娱乐类

文学类

小说类

教材类

动漫类

其他类
数量：

20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。

日期：

搜索：

颜色：

范围：

多行文本：

进度条：

评级：

按钮：
```
                
                
            
```

                
                let sections = document.querySelectorAll('#sizeinput section');
                sm.onclick=()=>{
                    sections.forEach((k)=>{
                        k.classList.remove('_in-lg');
                        k.classList.add('_in-sm');
                    });
                }
                lg.onclick=()=>{
                    sections.forEach((k)=>{
                        k.classList.remove('_in-sm');
                        k.classList.add('_in-lg');
                    });
                }
                md.onclick=()=>{
                    sections.forEach((k)=>{
                        k.classList.remove('_in-sm');
                        k.classList.remove('_in-lg');
                    });
                }
                normal.onclick=()=>{
                    sections.forEach((k)=>{
                        k.classList.remove('_in-apart');
                        k.classList.remove('_in-full');
                        k.classList.remove('_in-compact');
                        k.classList.remove('_in-embed');
                    });
                }
                full.onclick=()=>{
                    sections.forEach((k)=>{
                        k.classList.remove('_in-apart');
                        k.classList.remove('_in-compact');
                        k.classList.remove('_in-embed');
                        k.classList.add('_in-full');
                    });
                }
                apart.onclick=()=>{
                    sections.forEach((k)=>{
                        k.classList.remove('_in-full');
                        k.classList.remove('_in-compact');
                        k.classList.remove('_in-embed');
                        k.classList.add('_in-apart');
                    });
                }
                compact.onclick=()=>{
                    sections.forEach((k)=>{
                        k.classList.remove('_in-apart');
                        k.classList.remove('_in-full');
                        k.classList.remove('_in-embed');
                        k.classList.add('_in-compact');
                    });
                }
                embed.onclick=()=>{
                    sections.forEach((k)=>{
                        k.classList.remove('_in-apart');
                        k.classList.remove('_in-full');
                        k.classList.remove('_in-compact');
                        k.classList.add('_in-embed');
                    });
                }

使用图标

在左侧role=label标签可以加入指示图标或图片。图标的样式类名包含icon-将会被识别。

输出
HTML

姓名：

注意：最多10个汉字

必填

户型：

室

厅

卫

产品：

尺寸：

单位米

手机号：

验证错误

获取验证码
```
                
                
            
```