How francesca-22/javascript-form-component works
This is an embeddable JavaScript/PHP custom-tag form component. The main workflow is page markup with custom form and input tags → generated form UI → interactive input handling and validation → normal form submission to the host application. Major documented branches include address suggestions, phone prefixes, CAPTCHA, file uploads, and specialized color/date-time controls. Edges reflect the sampled imports and documented usage; unsampled request wiring and host-side PHP handling are left unspecified.
Main entry points: createFormComponent.js Form builder · checkForm.js Form validation · fade.js Fade effects · inputPhoneSelectFlagPrefix.php Phone prefix list
Components 22
Form composition
- Form builder
formComponent/createFormComponent.js - Generated form
formComponent/createFormComponent.js - Form validation
formComponent/js/checkForm.js
Input interactions
- Datalist suggestions
formComponent/js/checkForm.js - Phone prefix list
formComponent/jsonData/inputPhoneSelectPrefix/inputPhoneSelectFlagPrefix.php - Color picker
formComponent/components/colorPicker/colorPicker.js - Date-time picker
formComponent/components/dateTimeSelect/dtsel.js - Fade effects
formComponent/components/modules/fade.js - List navigation
formComponent/components/modules/scrollListWithArrows.js
PHP data services
- Address lookup
formComponent/jsonData/inputDatalist/comuni-cap-province-regioni-autocomplete.php - Italian address data
formComponent/jsonData/inputDatalist/comuni.json - Country prefix data
formComponent/jsonData/inputPhoneSelectPrefix/flagsPrefix.json - Antispam image
formComponent/captcha/captcha.php - File processing
formComponent/php/formPHPScanData.php - Upload directory
Presentation
- Component styles
formComponent/css/formComponent.css - Theme variables
formComponent/css/formComponent-variables.php - Style overrides
formComponent/css/formComponent-customize.php
Other components
- Host page
- Form markup
- Form user
- Host PHP handler
Connections 24
- Form markup → Form builder: defines tags
- Host page → Form builder: loads module
- Form builder → Generated form: creates UI
- Form builder → Form validation: imports
- Form user → Generated form: fills fields
- Generated form → Form validation: validates inputs
- Generated form → Host PHP handler: submits form
- Generated form → Datalist suggestions: supports suggestions
- Datalist suggestions → Address lookup: looks up address
- Address lookup → Italian address data: reads data
- Generated form → Phone prefix list: supports prefixes
- Phone prefix list → Country prefix data: reads data
- Generated form → Antispam image: loads antispam
- Host PHP handler → File processing: processes uploads
- File processing → Upload directory: saves files
- Form validation → Color picker: uses picker
- Form validation → Date-time picker: uses picker
- Form validation → Fade effects: uses effects
- Form validation → List navigation: uses navigation
- Form builder → Component styles: loads styles
- Form builder → Theme variables: loads theme
- Form builder → Style overrides: loads overrides
- Color picker → Fade effects: uses effects
- Date-time picker → Fade effects: uses effects