Form json

rfc.md

FJSON

Json based standart for html forms

interface FieldValidation {
  minLength?: number;
  maxLength?: number;
  format?: 'email' | 'uri' | 'phone';
  minimum?: number;
  maximum?: number;
}

interface FieldChoice {
  label: string;
  name: string;
}

interface Field {
  type: 'text' | 'password' | 'email' | 'number' | 'url' | 'tel' | 'date' | 'time' | 'checkbox' | 'radio' | 'select' | 'textarea';
  label: string;
  name: string;
  required?: boolean;
  validation?: FieldValidation;
  choices?: FieldChoice[];
}

interface Form {
  fields: Field[];
}

Example

{
  "fields": [
    {
      "type": "text",
      "label": "Text Input",
      "name": "text_input",
      "required": true,
      "validation": {
        "minLength": 2,
        "maxLength": 50
      }
    },
    {
      "type": "password",
      "label": "Password Input",
      "name": "password_input",
      "required": true,
      "validation": {
        "minLength": 8
      }
    },
    {
      "type": "email",
      "label": "Email Input",
      "name": "email_input",
      "required": true,
      "validation": {
        "format": "email"
      }
    },
    {
      "type": "number",
      "label": "Number Input",
      "name": "number_input",
      "required": true,
      "validation": {
        "minimum": 0,
        "maximum": 100
      }
    },
    {
      "type": "url",
      "label": "URL Input",
      "name": "url_input",
      "required": true,
      "validation": {
        "format": "uri"
      }
    },
    {
      "type": "tel",
      "label": "Telephone Input",
      "name": "tel_input",
      "required": true,
      "validation": {
        "format": "phone"
      }
    },
    {
      "type": "date",
      "label": "Date Input",
      "name": "date_input",
      "required": true
    },
    {
      "type": "time",
      "label": "Time Input",
      "name": "time_input",
      "required": true
    },
    {
      "type": "checkbox",
      "label": "Checkbox",
      "name": "checkbox_input"
    },
    {
      "type": "radio",
      "label": "Radio Button",
      "name": "radio_input",
      "choices": [
        {
          "label": "Option 1",
          "name": "option1"
        },
        {
          "label": "Option 2",
          "name": "option2"
        },
        {
          "label": "Option 3",
          "name": "option3"
        }
      ]
    },
    {
      "type": "select",
      "label": "Select",
      "name": "select_input",
      "required": true,
      "choices": [
        {
          "label": "Option 1",
          "name": "option1"
        },
        {
          "label": "Option 2",
          "name": "option2"
        },
        {
          "label": "Option 3",
          "name": "option3"
        }
      ]
    },
    {
      "type": "textarea",
      "label": "Textarea",
      "name": "textarea_input",
      "required": true,
      "validation": {
        "maxLength": 500
      }
    }
  ]
}