From 38fee81c80c0b366dcd9e70912b1197605b72c7a Mon Sep 17 00:00:00 2001 From: Anchal Singh <128113546+imanchalsingh@users.noreply.github.com> Date: Thu, 6 Nov 2025 23:50:31 +0530 Subject: [PATCH] chore: enhance form styling and input placeholders in examples (#7185) * Enhance form styling and input placeholders * Refactor HTML for multipart form data example Updated the title and improved styling for better aesthetics. Enhanced the form layout and added theme toggle functionality. --------- Co-authored-by: Jay --- examples/postMultipartFormData/index.html | 600 ++++++++++++++++++---- 1 file changed, 499 insertions(+), 101 deletions(-) diff --git a/examples/postMultipartFormData/index.html b/examples/postMultipartFormData/index.html index a5c27fa..553e8d7 100644 --- a/examples/postMultipartFormData/index.html +++ b/examples/postMultipartFormData/index.html @@ -1,128 +1,526 @@ - axios - post example + Axios - Multipart Form Example + - - -

Post multipart/form-data

+ .container { + max-width: 1200px; + background: var(--card-bg); + border-radius: var(--border-radius); + box-shadow: var(--shadow); + padding: 0; + overflow: hidden; + transition: var(--transition); + } -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
- -
+ .header { + background: linear-gradient(135deg, var(--primary), var(--secondary)); + color: white; + padding: 25px 30px; + display: flex; + justify-content: space-between; + align-items: center; + position: relative; + } -
+ h1 { + font-size: 28px; + font-weight: 600; + margin: 0; + } - + .theme-toggle { + background: rgba(255, 255, 255, 0.2); + border: none; + border-radius: 50px; + width: 60px; + height: 30px; + display: flex; + align-items: center; + padding: 0 5px; + cursor: pointer; + position: relative; + transition: var(--transition); + } + .theme-toggle:hover { + background: rgba(255, 255, 255, 0.3); + } -
-
+ .toggle-circle { + width: 22px; + height: 22px; + background: white; + border-radius: 50%; + position: absolute; + left: 4px; + transition: var(--transition); + } -
+ [data-theme="dark"] .toggle-circle { + left: 34px; + } - - + [data-theme="dark"] .result-section { + background-color: rgba(26, 26, 46, 0.5); + } + + .form-group { + margin-bottom: 24px; + } + + label { + display: block; + margin-bottom: 8px; + font-weight: 500; + color: var(--text-color); + } + + input[type="text"], + input[type="number"], + input[type="file"] { + width: 100%; + padding: 14px 16px; + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + font-size: 16px; + transition: var(--transition); + background-color: var(--input-bg); + color: var(--text-color); + } + + input[type="text"]:focus, + input[type="number"]:focus, + input[type="file"]:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2); + } + + .radio-group { + display: flex; + flex-direction: column; + gap: 15px; + margin: 25px 0; + } + + .radio-option { + display: flex; + align-items: center; + padding: 15px; + border: 1px solid var(--border-color); + border-radius: var(--border-radius); + cursor: pointer; + transition: var(--transition); + background-color: var(--input-bg); + } + + .radio-option:hover { + background-color: rgba(108, 99, 255, 0.05); + border-color: var(--primary); + } + + .radio-option input { + margin-right: 12px; + transform: scale(1.2); + } + + .radio-option label { + margin-bottom: 0; + cursor: pointer; + } + + .btn-primary { + background: linear-gradient(135deg, var(--primary), var(--primary-dark)); + border: none; + padding: 16px 28px; + font-size: 16px; + font-weight: 600; + border-radius: var(--border-radius); + cursor: pointer; + transition: var(--transition); + width: 100%; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + color: white; + box-shadow: 0 4px 12px rgba(108, 99, 255, 0.3); + } + + .btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 6px 15px rgba(108, 99, 255, 0.4); + } + + .postSubmission { + margin-top: 20px; + padding: 25px; + background-color: var(--light); + border-radius: var(--border-radius); + flex-grow: 1; + display: flex; + flex-direction: column; + } + + [data-theme="dark"] .postSubmission { + background-color: var(--gray-light); + } + + .checkNetwork { + margin-bottom: 20px; + padding: 15px; + background-color: rgba(108, 99, 255, 0.1); + border-left: 4px solid var(--primary); + border-radius: 4px; + } + + .text-strong { + font-weight: 700; + color: var(--primary); + } + + .hidden { + display: none; + } + + .text-danger { + padding: 15px; + background-color: rgba(220, 53, 69, 0.1); + border-left: 4px solid var(--danger); + border-radius: 4px; + color: var(--danger); + margin-top: 20px; + } + + .text-success { + padding: 15px; + background-color: rgba(75, 181, 67, 0.1); + border-left: 4px solid var(--success); + border-radius: 4px; + color: var(--success); + margin-top: 20px; + } + + .info-box { + display: flex; + align-items: center; + gap: 12px; + margin-top: 20px; + padding: 15px; + background-color: rgba(108, 99, 255, 0.05); + border-radius: var(--border-radius); + } + + .info-box i { + color: var(--primary); + font-size: 20px; + } + + .result-title { + font-size: 20px; + font-weight: 600; + margin-bottom: 20px; + color: var(--primary); + display: flex; + align-items: center; + gap: 10px; + } + + .result-content { + background-color: var(--input-bg); + border-radius: var(--border-radius); + padding: 20px; + flex-grow: 1; + overflow-y: auto; + border: 1px solid var(--border-color); + font-family: 'Courier New', monospace; + white-space: pre-wrap; + } + + .result-placeholder { + color: var(--gray); + font-style: italic; + text-align: center; + margin-top: 50%; + transform: translateY(-50%); + } + + @media (max-width: 600px) { + .container { + margin: 10px; + } + + .form-section, .result-section { + padding: 20px; + } + + .header { + padding: 20px; + flex-direction: column; + gap: 15px; + } + + h1 { + font-size: 24px; + } + } + + + +
+
+

Multipart Form Data

+ +
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ + +
+
+ + +
+
+ + +
+ +
+ + + +
+
+ +
+
+ Response Data +
+
+
Submit the form to see the response data here
+
+
+
+ +
+ +
This form demonstrates how to submit multipart/form-data with both text fields and files.
+
+
+ + +