Skip to content

Commit a495985

Browse files
jamalihassan0307jamalihassan0307
committed
Add new HTML form snippets for various input types including text, file, color, date, and more to enhance the snippet library.
1 parent b65bf80 commit a495985

File tree

2 files changed

+196
-0
lines changed

2 files changed

+196
-0
lines changed

‎images/download.png‎

44.6 KB
Loading

‎snippets/categories/forms.json‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,5 +82,201 @@
8282
],
8383
"description": "Django form with crispy-forms",
8484
"scope": "text.html.django"
85+
},
86+
"html_form_group": {
87+
"prefix": "afgroup",
88+
"body": [
89+
"<div class=\"form-group mb-3\">",
90+
"\t<label for=\"${1:inputId}\" class=\"form-label\">${2:Label Text}</label>",
91+
"\t${3:input_element}",
92+
"\t<div class=\"form-text\">${4:Help text}</div>",
93+
"</div>"
94+
],
95+
"description": "HTML form group with Bootstrap classes",
96+
"scope": "text.html"
97+
},
98+
"html_input_group": {
99+
"prefix": "afinputgroup",
100+
"body": [
101+
"<div class=\"input-group mb-3\">",
102+
"\t<span class=\"input-group-text\" id=\"${1:addonId}\">${2:@}</span>",
103+
"\t<input type=\"text\" class=\"form-control\" placeholder=\"${3:Username}\" aria-label=\"${4:Username}\" aria-describedby=\"${1:addonId}\">",
104+
"\t<button class=\"btn btn-outline-secondary\" type=\"button\">${5:Button}</button>",
105+
"</div>"
106+
],
107+
"description": "HTML input group with add-ons",
108+
"scope": "text.html"
109+
},
110+
"html_form_validation": {
111+
"prefix": "afvalidation",
112+
"body": [
113+
"<div class=\"form-group mb-3\">",
114+
"\t<label for=\"${1:inputId}\" class=\"form-label\">${2:Label Text}</label>",
115+
"\t<input type=\"${3:text}\" class=\"form-control is-${4:invalid}\" id=\"${1:inputId}\" required>",
116+
"\t<div class=\"invalid-feedback\">",
117+
"\t\t${5:Please provide a valid value.}",
118+
"\t</div>",
119+
"</div>"
120+
],
121+
"description": "HTML form input with validation",
122+
"scope": "text.html"
123+
},
124+
"html_form_range": {
125+
"prefix": "afrange",
126+
"body": [
127+
"<div class=\"form-group mb-3\">",
128+
"\t<label for=\"${1:rangeId}\" class=\"form-label\">${2:Range label}</label>",
129+
"\t<input type=\"range\" class=\"form-range\" min=\"${3:0}\" max=\"${4:100}\" step=\"${5:1}\" id=\"${1:rangeId}\">",
130+
"\t<div class=\"form-text\">${6:Current value: <span id=\"${1:rangeId}Value\">50</span>}</div>",
131+
"</div>"
132+
],
133+
"description": "HTML range input with Bootstrap classes",
134+
"scope": "text.html"
135+
},
136+
"html_form_file": {
137+
"prefix": "affile",
138+
"body": [
139+
"<div class=\"form-group mb-3\">",
140+
"\t<label for=\"${1:fileId}\" class=\"form-label\">${2:File input}</label>",
141+
"\t<input type=\"file\" class=\"form-control\" id=\"${1:fileId}\" accept=\"${3:.pdf,.doc,.docx}\">",
142+
"\t<div class=\"form-text\">${4:Maximum file size: 5MB}</div>",
143+
"</div>"
144+
],
145+
"description": "HTML file input with Bootstrap classes",
146+
"scope": "text.html"
147+
},
148+
"html_form_color": {
149+
"prefix": "afcolor",
150+
"body": [
151+
"<div class=\"form-group mb-3\">",
152+
"\t<label for=\"${1:colorId}\" class=\"form-label\">${2:Color picker}</label>",
153+
"\t<input type=\"color\" class=\"form-control form-control-color\" id=\"${1:colorId}\" value=\"${3:#563d7c}\">",
154+
"</div>"
155+
],
156+
"description": "HTML color input with Bootstrap classes",
157+
"scope": "text.html"
158+
},
159+
"html_form_date": {
160+
"prefix": "afdate",
161+
"body": [
162+
"<div class=\"form-group mb-3\">",
163+
"\t<label for=\"${1:dateId}\" class=\"form-label\">${2:Date picker}</label>",
164+
"\t<input type=\"date\" class=\"form-control\" id=\"${1:dateId}\" min=\"${3:2024-01-01}\" max=\"${4:2024-12-31}\">",
165+
"</div>"
166+
],
167+
"description": "HTML date input with Bootstrap classes",
168+
"scope": "text.html"
169+
},
170+
"html_form_time": {
171+
"prefix": "aftime",
172+
"body": [
173+
"<div class=\"form-group mb-3\">",
174+
"\t<label for=\"${1:timeId}\" class=\"form-label\">${2:Time picker}</label>",
175+
"\t<input type=\"time\" class=\"form-control\" id=\"${1:timeId}\" step=\"${3:900}\">",
176+
"</div>"
177+
],
178+
"description": "HTML time input with Bootstrap classes",
179+
"scope": "text.html"
180+
},
181+
"html_form_datetime": {
182+
"prefix": "afdatetime",
183+
"body": [
184+
"<div class=\"form-group mb-3\">",
185+
"\t<label for=\"${1:datetimeId}\" class=\"form-label\">${2:Date and time picker}</label>",
186+
"\t<input type=\"datetime-local\" class=\"form-control\" id=\"${1:datetimeId}\">",
187+
"</div>"
188+
],
189+
"description": "HTML datetime-local input with Bootstrap classes",
190+
"scope": "text.html"
191+
},
192+
"html_form_month": {
193+
"prefix": "afmonth",
194+
"body": [
195+
"<div class=\"form-group mb-3\">",
196+
"\t<label for=\"${1:monthId}\" class=\"form-label\">${2:Month picker}</label>",
197+
"\t<input type=\"month\" class=\"form-control\" id=\"${1:monthId}\">",
198+
"</div>"
199+
],
200+
"description": "HTML month input with Bootstrap classes",
201+
"scope": "text.html"
202+
},
203+
"html_form_week": {
204+
"prefix": "afweek",
205+
"body": [
206+
"<div class=\"form-group mb-3\">",
207+
"\t<label for=\"${1:weekId}\" class=\"form-label\">${2:Week picker}</label>",
208+
"\t<input type=\"week\" class=\"form-control\" id=\"${1:weekId}\">",
209+
"</div>"
210+
],
211+
"description": "HTML week input with Bootstrap classes",
212+
"scope": "text.html"
213+
},
214+
"html_form_tel": {
215+
"prefix": "aftel",
216+
"body": [
217+
"<div class=\"form-group mb-3\">",
218+
"\t<label for=\"${1:telId}\" class=\"form-label\">${2:Phone number}</label>",
219+
"\t<input type=\"tel\" class=\"form-control\" id=\"${1:telId}\" pattern=\"[0-9]{3}-[0-9]{3}-[0-9]{4}\" placeholder=\"${3:123-456-7890}\">",
220+
"\t<div class=\"form-text\">${4:Format: 123-456-7890}</div>",
221+
"</div>"
222+
],
223+
"description": "HTML telephone input with Bootstrap classes",
224+
"scope": "text.html"
225+
},
226+
"html_form_email": {
227+
"prefix": "afemail",
228+
"body": [
229+
"<div class=\"form-group mb-3\">",
230+
"\t<label for=\"${1:emailId}\" class=\"form-label\">${2:Email address}</label>",
231+
"\t<input type=\"email\" class=\"form-control\" id=\"${1:emailId}\" placeholder=\"${3:name@example.com}\">",
232+
"</div>"
233+
],
234+
"description": "HTML email input with Bootstrap classes",
235+
"scope": "text.html"
236+
},
237+
"html_form_url": {
238+
"prefix": "afurl",
239+
"body": [
240+
"<div class=\"form-group mb-3\">",
241+
"\t<label for=\"${1:urlId}\" class=\"form-label\">${2:URL}</label>",
242+
"\t<input type=\"url\" class=\"form-control\" id=\"${1:urlId}\" placeholder=\"${3:https://example.com}\">",
243+
"</div>"
244+
],
245+
"description": "HTML URL input with Bootstrap classes",
246+
"scope": "text.html"
247+
},
248+
"html_form_search": {
249+
"prefix": "afsearch",
250+
"body": [
251+
"<div class=\"form-group mb-3\">",
252+
"\t<label for=\"${1:searchId}\" class=\"form-label\">${2:Search}</label>",
253+
"\t<input type=\"search\" class=\"form-control\" id=\"${1:searchId}\" placeholder=\"${3:Search...}\">",
254+
"</div>"
255+
],
256+
"description": "HTML search input with Bootstrap classes",
257+
"scope": "text.html"
258+
},
259+
"html_form_number": {
260+
"prefix": "afnumber",
261+
"body": [
262+
"<div class=\"form-group mb-3\">",
263+
"\t<label for=\"${1:numberId}\" class=\"form-label\">${2:Number input}</label>",
264+
"\t<input type=\"number\" class=\"form-control\" id=\"${1:numberId}\" min=\"${3:0}\" max=\"${4:100}\" step=\"${5:1}\">",
265+
"</div>"
266+
],
267+
"description": "HTML number input with Bootstrap classes",
268+
"scope": "text.html"
269+
},
270+
"html_form_password": {
271+
"prefix": "afpassword",
272+
"body": [
273+
"<div class=\"form-group mb-3\">",
274+
"\t<label for=\"${1:passwordId}\" class=\"form-label\">${2:Password}</label>",
275+
"\t<input type=\"password\" class=\"form-control\" id=\"${1:passwordId}\" minlength=\"${3:8}\">",
276+
"\t<div class=\"form-text\">${4:Password must be at least 8 characters long}</div>",
277+
"</div>"
278+
],
279+
"description": "HTML password input with Bootstrap classes",
280+
"scope": "text.html"
85281
}
86282
}

0 commit comments

Comments
 (0)