# kb

id: drawing-graphics-learn-web-development-mdn-20260505-2
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-2.md

summary:
**Note:** You should generally set the size of the canvas using HTML attributes or DOM properties, as explained above. You could use CSS, but the trouble then is that the sizing is done after the canvas has rendered, and just like any other image, the canvas could become pixelated/distorted. ### [Getting the canvas context and final setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#getting_the_canvas_context_and_final_setup) We need to do one final thing before we can consider our canvas template finished. To draw onto the canvas we need to get a special reference to the drawing area called a context. This is done using the [`HTMLCanvasElement.getContext()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext) method, which for basic usage takes a single string as a parameter representing the type of context you want to retrieve. In this case we want a 2d canvas, so add the following JavaScript line below the others in `script.js`: **Note:** Other context values you could choose include `webgl` for WebGL, `webgpu` for WebGPU, etc., but we won't need those in this article. So that's it — our canvas is now primed and ready for drawing on! The `ctx` variable now contains a [`CanvasRenderingContext2D`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) object, and all drawing operations on the canvas will involve manipulating this object. Let's do one last thing before

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics


id: drawing-graphics-learn-web-development-mdn-20260505-3
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-3.md

summary:
Now you should see that your white outline has become much thicker! That's it for now. At this point your example should look like this: You can press the **Play** button to open the example in MDN Playground and edit the source code. ### [Drawing paths](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#drawing_paths) If you want to draw anything more complex than a rectangle, you need to draw a path. Basically, this involves writing code to specify exactly what path the pen should move along on your canvas to trace the shape you want to draw. Canvas includes functions for drawing straight lines, circles, Bézier curves, and more. Start the section off by making a fresh copy of your canvas template in which to draw the new example. We'll be using some common methods and properties across all of the below sections: * [`beginPath()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath "beginPath\(\)") — start drawing a path at the point where the pen currently is on the canvas. On a new canvas, the pen starts out at (0, 0). * [`moveTo()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/moveTo "moveTo\(\)") — move the pen to a different point on the canvas, without recording or tracing the line; the pen "jumps" to the new position. * [`fill()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fill "fill\(\)") — draw a filled shape


id: drawing-graphics-learn-web-development-mdn-20260505-4
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-4.md

summary:
#### Drawing circles Now let's look at how to draw a circle in canvas. This is accomplished using the [`arc()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc "arc\(\)") method, which draws all or part of a circle at a specified point. 1. Let's add an arc to our canvas — add the following to the bottom of your code: `arc()` takes six parameters. The first two specify the position of the arc's center (X and Y, respectively). The third is the circle's radius, the fourth and fifth are the start and end angles at which to draw the circle (so specifying 0 and 360 degrees gives us a full circle), and the sixth parameter defines whether the circle should be drawn counterclockwise (anticlockwise) or clockwise (`false` is clockwise). **Note:** 0 degrees is horizontally to the right. 2. Let's try adding another arc: The pattern here is very similar, but with two differences: * We have set the last parameter of `arc()` to `true`, meaning that the arc is drawn counterclockwise, which means that even though the arc is specified as starting at -45 degrees and ending at 45 degrees, we draw the arc around the 270 degrees not inside this portion. If you were to change `true`


id: drawing-graphics-learn-web-development-mdn-20260505-5
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-5.md

summary:
Both of these take three properties in their basic usage: the text string to draw and the X and Y coordinates of the point to start drawing the text at. This works out as the **bottom left** corner of the **text box** (literally, the box surrounding the text you draw), which might confuse you as other drawing operations tend to start from the top left corner — bear this in mind. There are also a number of properties to help control text rendering such as [`font`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font "font"), which lets you specify font family, size, etc. It takes as its value the same syntax as the CSS [`font`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font) property. Canvas content is not accessible to screen readers. Text painted to the canvas is not available to the DOM, but must be made available to be accessible. In this example, we include the text as the value for `aria-label`. Try adding the following block to the bottom of your JavaScript: Here we draw two lines of text, one outline and the other stroke. The example should look like so: Press the **Play** button to open the example in MDN Playground and edit the source code. Have a play and see what you


id: drawing-graphics-learn-web-development-mdn-20260505-6
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-6.md

summary:
The final example should look like so: Press the **Play** button to open the example in MDN Playground and edit the source code. ## [Loops and animations](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#loops_and_animations) We have so far covered some very basic uses of 2D canvas, but really you won't experience the full power of canvas unless you update or animate it in some way. After all, canvas does provide scriptable images! If you aren't going to change anything, then you might as well just use static images and save yourself all the work. ### [Creating a loop](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#creating_a_loop) Playing with loops in canvas is rather fun — you can run canvas commands inside a [`for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) (or other type of) loop just like any other JavaScript code. Let's build an example. 1. Make another fresh copy of your canvas template. 2. Add the following line to the bottom of your JavaScript. This contains a new method, [`translate()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate "translate\(\)"), which moves the origin point of the canvas: This causes the coordinate origin (0, 0) to be moved to the center of the canvas, rather than being at the top left corner. This is very useful in many situations, like this one, where we want our design to be drawn


id: drawing-graphics-learn-web-development-mdn-20260505-7
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-7.md

summary:
### [Animations](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#animations) The loop example we built above was fun, but really you need a constant loop that keeps going and going for any serious canvas applications (such as games and real time visualizations). If you think of your canvas as being like a movie, you really want the display to update on each frame to show the updated view, with an ideal refresh rate of 60 frames per second so that movement appears nice and smooth to the human eye. There are a few JavaScript functions that will allow you to run functions repeatedly, several times a second, the best one for our purposes here being [`window.requestAnimationFrame()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame). It takes one parameter — the name of the function you want to run for each frame. The next time the browser is ready to update the screen, your function will get called. If that function draws the new update to your animation, then calls `requestAnimationFrame()` again just before the end of the function, the animation loop will continue to run. The loop ends when you stop calling `requestAnimationFrame()` or if you call [`window.cancelAnimationFrame()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/cancelAnimationFrame) after calling `requestAnimationFrame()` but before the frame is called. **Note:** It's good practice to call `cancelAnimationFrame()` from your


id: drawing-graphics-learn-web-development-mdn-20260505-8
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-8.md

summary:
**Note:** We won't cover `save()` and `restore()` here, but they are explained nicely in our [Transformations](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations) tutorial (and the ones that follow it). ### [Walking object animation](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#walking_object_animation) Now let's create our own simple animation — we'll be animating a moving object across the screen using a sprite sheet. 1. Make another fresh copy of our canvas template and open it in your code editor. 2. Update the fallback HTML to reflect the image: 3. This time, we won't be coloring the background black. So after acquiring the `ctx` variable, paint the background light gray instead: 4. At the bottom of the JavaScript, add the following line to once again make the coordinate origin sit in the middle of the canvas: 5. Now let's create a new [`HTMLImageElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement) object, set its [`src`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/src) to the image we want to load, and add an `onload` event handler that will cause the `draw()` function to fire when the image is loaded: 6. Now we'll add some variables to keep track of the position the sprite is to be drawn on the screen, and the sprite number we want to display. The sprite image is created by and shared at the courtesy of [Rachel Nabors](https://nearestnabors.com/),


id: drawing-graphics-learn-web-development-mdn-20260505-9
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-9.md

summary:
That's it! The final example should look like so: You can press the **Play** button to open the example in MDN Playground and edit the source code. ### [A simple drawing application](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#a_simple_drawing_application) As a final animation example, we'd like to show you a very simple drawing application, to illustrate how the animation loop can be combined with user input (like mouse movement, in this case). We won't get you to walk through and build this one; we'll just explore the most interesting parts of the code. You can play with the example live below; you can also click the **Play** button to open it in the MDN Playground, where you can edit the source code: Let's look at the most interesting parts. First of all, we keep track of the mouse's X and Y coordinates and whether it is being clicked or not with three variables: `curX`, `curY`, and `pressed`. When the mouse moves, we fire a function set as the `onmousemove` event handler, which captures the current X and Y values. We also use `onmousedown` and `onmouseup` event handlers to change the value of `pressed` to `true` when the mouse button is pressed, and back to `false` again when


id: drawing-graphics-learn-web-development-mdn-20260505-10
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-10.md

summary:
Before we get to defining `draw()`, we'll add a couple of lights to the scene, to liven things up a bit; add the following blocks next: An [`AmbientLight`](https://threejs.org/docs/index.html#api/en/lights/AmbientLight) object is a kind of soft light that lightens the whole scene a bit, like the sun when you are outside. The [`SpotLight`](https://threejs.org/docs/index.html#api/en/lights/SpotLight) object, on the other hand, is a directional beam of light, more like a flashlight/torch (or a spotlight, in fact). 10. Last of all, let's add our `draw()` function to the bottom of the code: This is fairly intuitive; on each frame, we rotate our cube slightly on its X and Y axes, then render the scene as viewed by our camera, then finally call `requestAnimationFrame()` to schedule drawing our next frame.


id: drawing-graphics-learn-web-development-mdn-20260505-11
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-11.md

summary:
The finished product should look like: **Note:** In our GitHub repo you can also find another interesting 3D cube example — [Three.js Video Cube](https://github.com/mdn/learning-area/tree/main/javascript/apis/drawing-graphics/threejs-video-cube) ([see it live also](https://mdn.github.io/learning-area/javascript/apis/drawing-graphics/threejs-video-cube/)). This uses [`getUserMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia "getUserMedia\(\)") to take a video stream from a computer web cam and project it onto the side of the cube as a texture! ## [Summary](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#summary) At this point, you should have a useful idea of the basics of graphics programming using Canvas and WebGL and what you can do with these APIs, as well as a good idea of where to go for further information. Have fun! ## [See also](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics#see_also) Here we have covered only the real basics of canvas — there is so much more to learn! The below articles will take you further. * [Canvas tutorial](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial) — A very detailed tutorial series explaining what you should know about 2D canvas in much more detail than was covered here. Essential reading. * [WebGL tutorial](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial) — A series that teaches the basics of raw WebGL programming. * [Building up a basic demo with Three.js](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js) — basic Three.js tutorial. We also have equivalent guides for [PlayCanvas](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas) or [Babylon.js](https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js). * [Game development](https://developer.mozilla.org/en-US/docs/Games) — the landing page for web games development on


id: drawing-graphics-learn-web-development-mdn-20260505-12
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-12.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Jan 25, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/client-side_apis/drawing_graphics/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/client-side_apis/drawing_graphics \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_APIs%2FDrawing_graphics&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fclient-side_apis%2Fdrawing_graphics%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_APIs%2FDrawing_graphics%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fclient-side_apis%2Fdrawing_graphics%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F06e6e54baef7032c4e81ca93291fde0a0585de8b%0A*+Document+last+modified%3A+2026-01-25T19%3A35%3A57.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: drawing-graphics-learn-web-development-mdn-20260505-13
category: reference
title: Drawing graphics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:53.006763+00:00
instance: kb-cron
parent: drawing-graphics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics-13.md


id: introduction-to-web-apis-learn-web-development-mdn-20260505-0
category: reference
title: Introduction to web APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:56.202722+00:00
instance: kb-cron
parent: introduction-to-web-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction


id: introduction-to-web-apis-learn-web-development-mdn-20260505-1
category: reference
title: Introduction to web APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:56.202722+00:00
instance: kb-cron
parent: introduction-to-web-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction-1.md

summary:
![A screenshot of the browser with the home page of firefox browser open. There are APIs built into the browser by default. Third party APIs are not built into the browser by default. Their code and information has to be retrieved from somewhere on the web to utilize them.](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction/browser.png) ### [Relationship between JavaScript, APIs, and other JavaScript tools](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction#relationship_between_javascript_apis_and_other_javascript_tools) So above, we talked about what client-side JavaScript APIs are, and how they relate to the JavaScript language. Let's recap this to make it clearer, and also mention where other JavaScript tools fit in: * JavaScript — A high-level scripting language built into browsers that allows you to implement functionality on web pages/apps. Note that JavaScript is also available in other programming environments, such as [Node](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction). * Browser APIs — constructs built into the browser that sit on top of the JavaScript language and allow you to implement functionality more easily. * Third-party APIs — constructs built into third-party platforms (e.g., Disqus, Facebook) that allow you to use some of those platform's functionality in your own web pages (for example, display your Disqus comments on a web page). * JavaScript libraries — Usually one or more JavaScript files containing [custom functions](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Functions) that

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction


id: introduction-to-web-apis-learn-web-development-mdn-20260505-2
category: reference
title: Introduction to web APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:56.202722+00:00
instance: kb-cron
parent: introduction-to-web-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction-2.md

summary:
### [Common third-party APIs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction#common_third-party_apis) Third-party APIs come in a large variety; some of the more popular ones that you are likely to make use of sooner or later are: * Map APIs, like [Mapquest](https://developer.mapquest.com/) and the [Google Maps API](https://developers.google.com/maps/), which allow you to do all sorts of things with maps on your web pages. * The [Facebook suite of APIs](https://developers.facebook.com/docs/), which enables you to use various parts of the Facebook ecosystem to benefit your app, such as by providing app login using Facebook login, accepting in-app payments, rolling out targeted ad campaigns, etc. * The [Telegram APIs](https://core.telegram.org/api), which allows you to embed content from Telegram channels on your website, in addition to providing support for bots. * The [YouTube API](https://developers.google.com/youtube/), which allows you to embed YouTube videos on your site, search YouTube, build playlists, and more. * The [Pinterest API](https://developers.pinterest.com/), which provides tools to manage Pinterest boards and pins to include them in your website. * The [Twilio API](https://www.twilio.com/docs), which provides a framework for building voice and video call functionality into your app, sending SMS/MMS from your apps, and more. * The [Disqus API](https://disqus.com/api/docs/), which provides a commenting platform that can be integrated into your site. * The [Mastodon API](https://docs.joinmastodon.org/api/),

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction


id: introduction-to-web-apis-learn-web-development-mdn-20260505-3
category: reference
title: Introduction to web APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:56.202722+00:00
instance: kb-cron
parent: introduction-to-web-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction-3.md

summary:
So how do these objects interact? If you look at our [simple web audio example](https://github.com/mdn/learning-area/blob/main/javascript/apis/introduction/web-audio/index.html) ([see it live also](https://mdn.github.io/learning-area/javascript/apis/introduction/web-audio/)), you'll first see the following HTML: We, first of all, include an `<audio>` element with which we embed an MP3 into the page. We don't include any default browser controls. Next, we include a [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button) that we'll use to play and stop the music, and an [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input) element of type range, which we'll use to adjust the volume of the track while it's playing. Next, let's look at the JavaScript for this example. We start by creating an `AudioContext` instance inside which to manipulate our track: Next, we create constants that store references to our `<audio>`, `<button>`, and `<input>` elements, and use the [`AudioContext.createMediaElementSource()`](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaElementSource) method to create a `MediaElementAudioSourceNode` representing the source of our audio — the `<audio>` element will be played from: Next up we include a couple of event handlers that serve to toggle between play and pause when the button is pressed and reset the display back to the beginning when the song has finished playing: **Note:** Some of you may notice that the `play()` and `pause()` methods being used to play and pause the track are not


id: introduction-to-web-apis-learn-web-development-mdn-20260505-4
category: reference
title: Introduction to web APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:56.202722+00:00
instance: kb-cron
parent: introduction-to-web-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction-4.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Nov 30, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/client-side_apis/introduction/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/client-side_apis/introduction \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_APIs%2FIntroduction&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fclient-side_apis%2Fintroduction%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_APIs%2FIntroduction%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fclient-side_apis%2Fintroduction%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Fca26363fcc6fc861103d40ac0205e5c5b79eb2fa%0A*+Document+last+modified%3A+2025-11-30T02%3A30%3A55.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: introduction-to-web-apis-learn-web-development-mdn-20260505-5
category: reference
title: Introduction to web APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:56.202722+00:00
instance: kb-cron
parent: introduction-to-web-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction-5.md


id: third-party-apis-learn-web-development-mdn-20260505-0
category: reference
title: Third-party APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:58.725803+00:00
instance: kb-cron
parent: third-party-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs


id: third-party-apis-learn-web-development-mdn-20260505-1
category: reference
title: Third-party APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:58.725803+00:00
instance: kb-cron
parent: third-party-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs-1.md

summary:
## [What are third party APIs?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs#what_are_third_party_apis) Third party APIs are APIs provided by third parties — generally companies such as Facebook, Twitter, or Google — to allow you to access their functionality via JavaScript and use it on your site. One of the most obvious examples is using mapping APIs to display custom maps on your pages. Let's look at a [Simple Mapquest API example](https://github.com/mdn/learning-area/tree/main/javascript/apis/third-party-apis/mapquest), and use it to illustrate how third-party APIs differ from browser APIs. ### [They are found on third-party servers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs#they_are_found_on_third-party_servers) Browser APIs are built into the browser — you can access them from JavaScript immediately. For example, the Web Audio API we [saw in the Introductory article](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction#how_do_apis_work) is accessed using the native [`AudioContext`](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext) object. For example: Third party APIs, on the other hand, are located on third party servers. To access them from JavaScript you first need to connect to the API functionality and make it available on your page. This typically involves first linking to a JavaScript library available on the server via a [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script) element, as seen in our Mapquest example: You can then start using the objects available in that library. For example: Here we are creating a variable to store the map

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs


id: third-party-apis-learn-web-development-mdn-20260505-2
category: reference
title: Third-party APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:58.725803+00:00
instance: kb-cron
parent: third-party-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs-2.md

summary:
### [Changing the type of map](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs#changing_the_type_of_map) There are a number of different types of map that can be shown with the Mapquest API. To do this, find the following line: Try changing `'map'` to `'hybrid'` to show a hybrid-style map. Try some other values too. The [`tileLayer` reference page](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-tile-layer/) shows the different available options, plus a lot more information. ### [Adding different controls](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs#adding_different_controls) The map has a number of different controls available; by default it just shows a zoom control. You can expand the controls available using the `map.addControl()` method; add this to your code: The [`mapquest.control()` method](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-control/) just creates a simple full-featured control set, and it is placed in the top-right-hand corner by default. You can adjust the position by specifying an options object as a parameter for the control containing a `position` property, the value of which is a string specifying a position for the control. Try this, for example: There are other types of control available, for example [`mapquest.searchControl()`](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-search-control/) and [`mapquest.satelliteControl()`](https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-satellite-control/), and some are quite complex and powerful. Have a play around and see what you can come up with. ### [Adding a custom marker](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs#adding_a_custom_marker) Adding a marker (icon) at a certain point on the map is

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs


id: third-party-apis-learn-web-development-mdn-20260505-3
category: reference
title: Third-party APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:58.725803+00:00
instance: kb-cron
parent: third-party-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs-3.md

summary:
`submitSearch()` sets the page number back to 0 to begin with, then calls `fetchResults()`. This first calls [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) on the event object, to stop the form actually submitting (which would break the example). Next, we use some string manipulation to assemble the full URL that we will make the request to. We start off by assembling the parts we deem as mandatory for this demo: * The base URL (taken from the `baseURL` variable). * The API key, which has to be specified in the `api-key` URL parameter (the value is taken from the `key` variable). * The page number, which has to be specified in the `page` URL parameter (the value is taken from the `pageNumber` variable). * The search term, which has to be specified in the `q` URL parameter (the value is taken from the value of the `searchTerm` text [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input)). * The document type to return results for, as specified in an expression passed in via the `fq` URL parameter. In this case, we want to return articles. Next, we use a couple of [`if ()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) statements to check whether the `startDate` and `endDate` elements have had values filled in on them. If they do, we


id: third-party-apis-learn-web-development-mdn-20260505-4
category: reference
title: Third-party APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:58.725803+00:00
instance: kb-cron
parent: third-party-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs-4.md

summary:
### [Wiring up the pagination buttons](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs#wiring_up_the_pagination_buttons) To make the pagination buttons work, we will increment (or decrement) the value of the `pageNumber` variable, and then re-rerun the fetch request with the new value included in the page URL parameter. This works because the NYTimes API only returns 10 results at a time — if more than 10 results are available, it will return the first 10 (0-9) if the `page` URL parameter is set to 0 (or not included at all — 0 is the default value), the next 10 (10-19) if it is set to 1, and so on. This allows us to write a simplistic pagination function. 1. Below the existing [`addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) call, add these two new ones, which cause the `nextPage()` and `previousPage()` functions to be invoked when the relevant buttons are clicked: 2. Below your previous addition, let's define the two functions — add this code now: The first function increments the `pageNumber` variable, then run the `fetchResults()` function again to display the next page's results. The second function works nearly exactly the same way in reverse, but we also have to take the extra step of checking that `pageNumber` is not already zero before decrementing


id: third-party-apis-learn-web-development-mdn-20260505-5
category: reference
title: Third-party APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:58.725803+00:00
instance: kb-cron
parent: third-party-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs-5.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Oct 30, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/client-side_apis/third_party_apis/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/client-side_apis/third_party_apis \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_APIs%2FThird_party_APIs&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fclient-side_apis%2Fthird_party_apis%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_APIs%2FThird_party_APIs%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fclient-side_apis%2Fthird_party_apis%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Fa4fcf79b60471db6f148fa4ba36f2cdeafbbeb70%0A*+Document+last+modified%3A+2025-10-30T21%3A49%3A49.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: third-party-apis-learn-web-development-mdn-20260505-6
category: reference
title: Third-party APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:58:58.725803+00:00
instance: kb-cron
parent: third-party-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs-6.md


id: video-and-audio-apis-learn-web-development-mdn-20260505-0
category: reference
title: Video and audio APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:01.612169+00:00
instance: kb-cron
parent: video-and-audio-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs


id: video-and-audio-apis-learn-web-development-mdn-20260505-1
category: reference
title: Video and audio APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:01.612169+00:00
instance: kb-cron
parent: video-and-audio-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs-1.md

summary:
At this point, if you load the HTML you should see a perfectly normal HTML video player, with the native controls rendered. #### Exploring the HTML Open the HTML index file. You'll see a number of features; the HTML is dominated by the video player and its controls: * The whole player is wrapped in a [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div) element, so it can all be styled as one unit if needed. * The [`<video>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/video) element contains two [`<source>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source) elements so that different formats can be loaded depending on the browser viewing the site. * The controls HTML is probably the most interesting: * We have four [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button)s — play/pause, stop, rewind, and fast forward. * Each `<button>` has a `class` name, a `data-icon` attribute for defining what icon should be shown on each button (we'll show how this works in the below section), and an `aria-label` attribute to provide an understandable description of each button, since we're not providing a human-readable label inside the tags. The contents of `aria-label` attributes are read out by screen readers when their users focus on the elements that contain them. * There is also a timer [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div), which will report the elapsed time when the video

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs


id: video-and-audio-apis-learn-web-development-mdn-20260505-2
category: reference
title: Video and audio APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:01.612169+00:00
instance: kb-cron
parent: video-and-audio-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs-2.md

summary:
#### Playing and pausing the video Let's implement probably the most important control — the play/pause button. 1. First of all, add the following to the bottom of your code, so that the `playPauseMedia()` function is invoked when the play button is clicked: 2. Now to define `playPauseMedia()` — add the following, again at the bottom of your code: Here we use an [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) statement to check whether the video is paused. The [`HTMLMediaElement.paused`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused) property returns true if the media is paused, which is any time the video is not playing, including when it is set at 0 duration after it first loads. If it is paused, we set the `data-icon` attribute value on the play button to "u", which is a "paused" icon, and invoke the [`HTMLMediaElement.play()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) method to play the media. On the second click, the button will be toggled back again — the "play" icon will be shown again, and the video will be paused with [`HTMLMediaElement.pause()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause). #### Stopping the video 1. Next, let's add functionality to handle stopping the video. Add the following [`addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) lines below the previous one you added: The [`click`](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event "click") event is obvious — we want to stop the video by running

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs


id: video-and-audio-apis-learn-web-development-mdn-20260505-3
category: reference
title: Video and audio APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:01.612169+00:00
instance: kb-cron
parent: video-and-audio-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs-3.md

summary:
#### Updating the elapsed time The very last piece of our media player to implement is the time-elapsed displays. To do this we'll run a function to update the time displays every time the [`timeupdate`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event "timeupdate") event is fired on the `<video>` element. The frequency with which this event fires depends on your browser, CPU power, etc. ([see this Stack Overflow post](https://stackoverflow.com/questions/9678177/how-often-does-the-timeupdate-event-fire-for-an-html5-video)). 1. Add the following `addEventListener()` line just below the others: 2. Now to define the `setTime()` function. Add the following at the bottom of your file: This is a fairly long function, so let's go through it step by step: 1. First of all, we work out the number of minutes and seconds in the [`HTMLMediaElement.currentTime`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime) value. 2. Then we initialize two more variables — `minuteValue` and `secondValue`. We use [`padStart()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart) to make each value 2 characters long, even if the numeric value is only a single digit. 3. The actual time value to display is set as `minuteValue` plus a colon character plus `secondValue`. 4. The [`Node.textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) value of the timer is set to the time value, so it displays in the UI. 5. The length we should set the inner `<div>` to is worked out by


id: video-and-audio-apis-learn-web-development-mdn-20260505-4
category: reference
title: Video and audio APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:01.612169+00:00
instance: kb-cron
parent: video-and-audio-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs-4.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Oct 31, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/client-side_apis/video_and_audio_apis/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/client-side_apis/video_and_audio_apis \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_APIs%2FVideo_and_audio_APIs&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fclient-side_apis%2Fvideo_and_audio_apis%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_APIs%2FVideo_and_audio_APIs%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fclient-side_apis%2Fvideo_and_audio_apis%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F9f7e7e9075e9f2b1937d2c8000f52a8ff76bff52%0A*+Document+last+modified%3A+2025-10-31T15%3A27%3A28.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: video-and-audio-apis-learn-web-development-mdn-20260505-5
category: reference
title: Video and audio APIs - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:01.612169+00:00
instance: kb-cron
parent: video-and-audio-apis-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs-5.md


id: understanding-client-side-web-development-tools-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools-0.md
category: reference
title: Understanding client-side web development tools - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools
date_saved: 2026-05-05T05:59:04.368101+00:00
instance: kb-cron
parent: understanding-client-side-web-development-tools-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API


id: understanding-client-side-web-development-tools-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools-1.md
category: reference
title: Understanding client-side web development tools - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools
date_saved: 2026-05-05T05:59:04.368101+00:00
instance: kb-cron
parent: understanding-client-side-web-development-tools-learn-web-development-mdn-20260505-0
summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Apr 11, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/client-side_tools/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/client-side_tools \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_tools&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fclient-side_tools%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_tools%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fclient-side_tools%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F48d220a8cffdfd5f088f8ca89724a9a92e34d8c0%0A*+Document+last+modified%3A+2025-04-11T19%3A13%3A37.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: deploying-our-app-learn-web-development-mdn-20260505-0
category: reference
title: Deploying our app - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:06.601255+00:00
instance: kb-cron
parent: deploying-our-app-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment


id: deploying-our-app-learn-web-development-mdn-20260505-1
category: reference
title: Deploying our app - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:06.601255+00:00
instance: kb-cron
parent: deploying-our-app-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment-1.md

summary:
It's exactly these kinds of connected services that we would encourage you to look for when deciding on your own build toolchain. We can commit our code and push to GitHub and the updated code will automatically trigger the entire build routine. If all is well, we get a live change deployed automatically. The _only_ action we need to perform is that initial "push". However, we do have to set these steps up, and we'll look at that now. ## [The build process](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment#the_build_process) Again, because we're using Vite for development, the build option is extremely simple to add. As we saw earlier, we already have a custom script `npm run build` that will let Vite build everything ready for production instead of just running it for development and testing purposes. This includes doing [minification](https://developer.mozilla.org/en-US/docs/Glossary/Minification) and [tree-shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) of code, and cache-busting on filenames. It is a good best practice to always define a `build` script in your project, so we can then rely on `npm run build` to always do the complete build step, without needing to remember the specific build command arguments for each project. The newly-created production code is placed in a new directory called `dist`, which contains _all_

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment


id: deploying-our-app-learn-web-development-mdn-20260505-2
category: reference
title: Deploying our app - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:06.601255+00:00
instance: kb-cron
parent: deploying-our-app-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment-2.md

summary:
**Note:** If you are interested in using the SSH option, thereby avoiding the need to enter your username and password every time you push to GitHub, [this tutorial walks you through how](https://docs.github.com/en/authentication/connecting-to-github-with-ssh). This final command instructs git to push the code to the "remote" location that we called `origin` (that's the repository hosted on github.com — we could have called it anything we like) using the branch `main`. We've not encountered branches at all, but the "main" branch is the default place for our work and it's what git starts on. When we define the action triggered to build the website, we'll also let it watch for changes on the "main" branch. **Note:** Until October 2020 the default branch on GitHub was `master`, which for various social reasons was switched to `main`. You should be aware that this older default branch may appear in various projects you encounter, but we'd suggest using `main` for your own projects. So with our project committed in git and pushed to our GitHub repository, the next step in the toolchain is to define a build action so our project can be deployed live on the web! ## [Using GitHub Actions for deployment](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment#using_github_actions_for_deployment) GitHub Actions,

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment


id: deploying-our-app-learn-web-development-mdn-20260505-3
category: reference
title: Deploying our app - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:06.601255+00:00
instance: kb-cron
parent: deploying-our-app-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment-3.md

summary:
This means the test passed. Like Vite, it will watch for changes and re-run the tests when you save a file. We can quit by pressing `q`. 5. We still need to wire the test to our build action, so it blocks the build if the test fails. Open the `.github/workflows/github-pages.yml` file (or whatever file name you gave to your build action) and add the following step, right before the step that runs `npm run build`: This will run the test before the build step. If the test fails, the build will fail, and the deployment will not happen. 6. Now let's upload the new code to GitHub, using similar commands to what you used before: In some cases you might want to test the result of the built code (since this isn't quite the original code we wrote), so the test might need to be run after the build command. You'll need to consider all these individual aspects whilst you're working on your own projects. Finally, a minute or so after pushing, GitHub Pages will deploy the project update. But only if it passes the test that was introduced. ## [Summary](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment#summary) That's it for our sample case study, and


id: deploying-our-app-learn-web-development-mdn-20260505-4
category: reference
title: Deploying our app - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:06.601255+00:00
instance: kb-cron
parent: deploying-our-app-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment-4.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Sep 14, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/client-side_tools/deployment/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/client-side_tools/deployment \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_tools%2FDeployment&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fclient-side_tools%2Fdeployment%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_tools%2FDeployment%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fclient-side_tools%2Fdeployment%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F6d363614de8a40c33d1afe92e4e846b75beea986%0A*+Document+last+modified%3A+2025-09-14T23%3A40%3A51.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: deploying-our-app-learn-web-development-mdn-20260505-5
category: reference
title: Deploying our app - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:06.601255+00:00
instance: kb-cron
parent: deploying-our-app-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Deployment-5.md


id: introducing-a-complete-toolchain-learn-web-development-mdn-20260505-0
category: reference
title: Introducing a complete toolchain - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:09.303880+00:00
instance: kb-cron
parent: introducing-a-complete-toolchain-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain


id: introducing-a-complete-toolchain-learn-web-development-mdn-20260505-1
category: reference
title: Introducing a complete toolchain - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:09.303880+00:00
instance: kb-cron
parent: introducing-a-complete-toolchain-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain-1.md

summary:
You may not be familiar with all the above features and tools or what they are doing, but don't panic — we'll explain each part as we move through this article. ## [Toolchains and their inherent complexity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain#toolchains_and_their_inherent_complexity) As with any chain, the more links you have in your toolchain, the more complex and potentially brittle it is — for example it might be more complex to configure, and easier to break. Conversely, the fewer links, the more resilient the toolchain is likely to be. All web projects will be different, and you need to consider what parts of your toolchain are necessary and consider each part carefully. The smallest toolchain is one that has no links at all. You would hand code the HTML, use "vanilla JavaScript" (meaning no frameworks or intermediary languages), and manually upload it all to a server for hosting. However, more complicated software requirements will likely benefit from the usage of tools to help simplify the development process. In addition, you should include tests before you deploy to your production server to ensure your software works as intended — this already sounds like a necessary toolchain. For our sample project, we'll be using a toolchain specifically

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain


id: introducing-a-complete-toolchain-learn-web-development-mdn-20260505-2
category: reference
title: Introducing a complete toolchain - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:09.303880+00:00
instance: kb-cron
parent: introducing-a-complete-toolchain-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain-2.md

summary:
As we talked about in [Chapter 1](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview), the toolchain will be structured into the following phases: * **Development environment** : The tools that are most fundamental to running your code. This part is already set up in the previous chapter. * **Safety net** : Making the software development experience stable and more efficient. We might also refer to this as our development environment. * **Transformation** : Tooling that allows us to use the latest features of a language (e.g., JavaScript) or another language entirely (e.g., JSX or TypeScript) in our development process, and then transforms our code so that the production version still runs on a wide variety of browsers, modern and older. * **Post development** : Tooling that comes into play after you are done with the body of development to ensure that your software makes it to the web and continues to run. In this case study we'll look at adding tests to your code, and deploying your app using GitHub Pages so it is available for all the web to see. Let's start working on these, beginning with our development environment. We will follow the same steps as how a real project would be set up, so

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain


id: introducing-a-complete-toolchain-learn-web-development-mdn-20260505-3
category: reference
title: Introducing a complete toolchain - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:09.303880+00:00
instance: kb-cron
parent: introducing-a-complete-toolchain-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain-3.md

summary:
It has the same content of `.gitignore`, but in a real project, you might want to ignore different files for Prettier than you do for git. Now that Prettier is installed and configured, running and tidying your code can be done on the command line, for example: **Note:** In the command above, we use Prettier with the `--write` flag. Prettier understands this to mean "if there's any problem in my code format, go ahead and fix them, then save my file". This is fine for our development process, but we can also use `prettier` without the flag and it will only check the file. Checking the file (and not saving it) is useful for purposes like checks that run before a release - i.e., "don't release any code that's not been properly formatted." You can also replace `./index.html` with any other file or folder to format them. For example, `.` will format everything in the current directory. In case you may forget the syntax, you can add it as a custom script in your package.json too: Now you can run the following to format the directory: It can still be arduous to run the command every time we change something,


id: introducing-a-complete-toolchain-learn-web-development-mdn-20260505-4
category: reference
title: Introducing a complete toolchain - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:09.303880+00:00
instance: kb-cron
parent: introducing-a-complete-toolchain-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain-4.md

summary:
The ESLint parser doesn't understand JSX by default, and its recommended rules don't handle React-specific semantics. Therefore, we will add some more configuration to make it support JSX and React properly. First, install `eslint-plugin-react` and `eslint-plugin-react-hooks`, which provide rules for writing correct and idiomatic React: Then, update the ESLint configuration file to include the recommended config of these plugins, which both loads the recommended rules and sets the parser options for JSX: There's a complete [list of ESLint rules](https://eslint.org/docs/latest/rules/) that you can tweak and configure to your heart's content and many companies and teams have published their [own ESLint configurations](https://www.npmjs.com/search?q=keywords:eslintconfig), which can sometimes be useful either to get inspiration or to select one that you feel suits your own standards. A forewarning though: ESLint configuration is a very deep rabbit hole! For the sake of simplicity, in this chapter, we're not going to explore all the features of ESLint, since this configuration works for our particular project and its requirements. However, bear in mind that if you want to refine and enforce a rule about how your code looks (or validates), it's very likely that it can be done with the right ESLint configuration. As with other tools, code editor


id: introducing-a-complete-toolchain-learn-web-development-mdn-20260505-5
category: reference
title: Introducing a complete toolchain - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:09.303880+00:00
instance: kb-cron
parent: introducing-a-complete-toolchain-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain-5.md

summary:
``` > client-toolchain-example@1.0.0 dev > vite Re-optimizing dependencies because lockfile has changed VITE v5.2.13 ready in 157 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help ``` The server is now running on the URL that was printed (in this case localhost:5173). 2. Go to this URL in your browser and you will see the example app running! Now we can make a few changes and view their effects live. 1. Load up the file `src/App.jsx` in your favorite text editor. 2. Replace all occurrences of `mdn/content` with your favorite GitHub repo, such as `facebook/react`. 3. Save the file, then go straight back to the app running in your browser. You'll notice that the browser has automatically refreshed, and the graphs have changed! You could also try using ESLint and Prettier too — try deliberately removing a load of the whitespace from one of your files and running Prettier on it to clean it up, or introduce a syntax error into one of your JavaScript files and see what errors ESLint gives you when you run the `eslint` command, or in your editor. ## [Summary](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain#summary) We've come a long way in


id: introducing-a-complete-toolchain-learn-web-development-mdn-20260505-6
category: reference
title: Introducing a complete toolchain - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:09.303880+00:00
instance: kb-cron
parent: introducing-a-complete-toolchain-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain-6.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Apr 8, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/client-side_tools/introducing_complete_toolchain/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/client-side_tools/introducing_complete_toolchain \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_tools%2FIntroducing_complete_toolchain&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fclient-side_tools%2Fintroducing_complete_toolchain%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_tools%2FIntroducing_complete_toolchain%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fclient-side_tools%2Fintroducing_complete_toolchain%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Ff85c3e78806c6df7b439a81b46a1828b281ae6a3%0A*+Document+last+modified%3A+2026-04-08T19%3A05%3A53.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: introducing-a-complete-toolchain-learn-web-development-mdn-20260505-7
category: reference
title: Introducing a complete toolchain - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:09.303880+00:00
instance: kb-cron
parent: introducing-a-complete-toolchain-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain-7.md


id: client-side-tooling-overview-learn-web-development-mdn-20260505-0
category: reference
title: Client-side tooling overview - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:11.726674+00:00
instance: kb-cron
parent: client-side-tooling-overview-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview


id: client-side-tooling-overview-learn-web-development-mdn-20260505-1
category: reference
title: Client-side tooling overview - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:11.726674+00:00
instance: kb-cron
parent: client-side-tooling-overview-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview-1.md

summary:
## [Overview of modern tooling](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview#overview_of_modern_tooling) Writing software for the web has become more sophisticated through the ages. Although it is still entirely reasonable to write HTML, CSS, and JavaScript "by hand" there is now a wealth of tools that developers can use to speed up the process of building a website, or app. There are some extremely well-established tools that have become common "household names" amongst the development community, and new tools are being written and released every day to solve specific problems. You might even find yourself writing a piece of software to aid your own development process, to solve a specific problem that existing tools don't already seem to handle. It is easy to become overwhelmed by the sheer number of tools that can be included in a single project. Equally, a single configuration file for a tool like [webpack](https://webpack.js.org/) can be hundreds of lines long, most of which are magical incantations that seem to do the job but which only a master engineer will fully understand! From time to time, even the most experienced of web developers get stuck on a tooling problem; it is possible to waste hours attempting to get a tooling pipeline working before

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview


id: client-side-tooling-overview-learn-web-development-mdn-20260505-2
category: reference
title: Client-side tooling overview - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:11.726674+00:00
instance: kb-cron
parent: client-side-tooling-overview-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview-2.md

summary:
### [Safety net](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview#safety_net) These are tools that make the code you write a little better. This part of the tooling should be specific to your own development environment, though it's not uncommon for companies to have some kind of policy or pre-baked configuration available to install so that all their developers are using the same processes. This includes anything that makes your development process easier for generating stable and reliable code. Safety net tooling should also help you either prevent mistakes or correct mistakes automatically without having to build your code from scratch each time. A few very common safety net tool types you will find being used by developers are as follows. #### Linters **Linters** are tools that check through your code and tell you about any errors that are present, what error types they are, and what code lines they are present on. Often linters can be configured to not only report errors, but also report any violations of a specified style guide that your team might be using (for example code that is using the wrong number of spaces for indentation, or using [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) rather than regular string literals). [ESLint](https://eslint.org/) is the industry standard JavaScript linter

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview


id: client-side-tooling-overview-learn-web-development-mdn-20260505-3
category: reference
title: Client-side tooling overview - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:11.726674+00:00
instance: kb-cron
parent: client-side-tooling-overview-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview-3.md

summary:
### [Post development](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview#post_development) Post-development tooling ensures that your software makes it to the web and continues to run. This includes the deployment processes, testing frameworks, auditing tools, and more. This stage of the development process is one that you want the least amount of active interaction with so that once it is configured, it runs mostly automatically, only popping up to say hello if something has gone wrong. #### Testing tools These generally take the form of a tool that will automatically run tests against your code to make sure it is correct before you go any further (for example, when you attempt to push changes to a GitHub repo). This can include linting, but also more sophisticated procedures like unit tests, where you run part of your code, making sure they behave as they should. * Frameworks for writing tests include [Jest](https://jestjs.io/), [Mocha](https://mochajs.org/), and [Jasmine](https://jasmine.github.io/). * Automated test running and notification systems include [Travis CI](https://www.travis-ci.com/), [Jenkins](https://www.jenkins.io/), [Circle CI](https://circleci.com/), and [others](https://en.wikipedia.org/wiki/List_of_build_automation_software#Continuous_integration). #### Deployment tools Deployment systems allow you to get your website published, are available for both static and dynamic sites, and commonly tend to work alongside testing systems. For example, a typical toolchain will wait for you to push


id: client-side-tooling-overview-learn-web-development-mdn-20260505-4
category: reference
title: Client-side tooling overview - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:11.726674+00:00
instance: kb-cron
parent: client-side-tooling-overview-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview-4.md

summary:
When you've chosen a tool to use, the first port of call should be the tool project homepage. This could be a full-blown website or it might be a single readme document in a code repository. The [date-fns docs](https://date-fns.org/docs/Getting-Started) for example are pretty good, complete, and easy to follow. Some documentation however can be rather technical and academic and not a good fit for your learning needs. Instead, you might want to find some dedicated tutorials on getting started with particular types of tools. A great starting place is to search websites like [CSS Tricks](https://css-tricks.com/), [Dev](https://dev.to/), [freeCodeCamp](https://www.freecodecamp.org/), and [Smashing Magazine](https://www.smashingmagazine.com/), as they're tailored to the web development industry. Again, you'll probably go through several different tools as you search for the right ones for you, trying them out to see if they make sense, are well-supported, and do what you want them to do. This is fine — it is all good for learning, and the road will get smoother as you get more experience. ## [Summary](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview#summary) That rounds off our gentle introduction to the topic of client-side web tooling, from a high level. Next up we will look at package managers. * [ Overview: Understanding client-side web development tools](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools)


id: client-side-tooling-overview-learn-web-development-mdn-20260505-5
category: reference
title: Client-side tooling overview - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:11.726674+00:00
instance: kb-cron
parent: client-side-tooling-overview-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview-5.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Oct 27, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/client-side_tools/overview/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/client-side_tools/overview \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_tools%2FOverview&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fclient-side_tools%2Foverview%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_tools%2FOverview%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fclient-side_tools%2Foverview%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F6722199b4d63fad3c33db1146af380fc98b6c202%0A*+Document+last+modified%3A+2025-10-27T09%3A17%3A57.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: client-side-tooling-overview-learn-web-development-mdn-20260505-6
category: reference
title: Client-side tooling overview - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:11.726674+00:00
instance: kb-cron
parent: client-side-tooling-overview-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Overview-6.md


id: package-management-basics-learn-web-development-mdn-20260505-0
category: reference
title: Package management basics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:14.165514+00:00
instance: kb-cron
parent: package-management-basics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management


id: package-management-basics-learn-web-development-mdn-20260505-1
category: reference
title: Package management basics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:14.165514+00:00
instance: kb-cron
parent: package-management-basics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management-1.md

summary:
## [A dependency in your project](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management#a_dependency_in_your_project) A **dependency** is a third-party bit of software that was probably written by someone else and ideally solves a single problem for you. A web project can have any number of dependencies, ranging from none to many, and your dependencies might include sub-dependencies that you didn't explicitly install — your dependencies may have their own dependencies. A simple example of a useful dependency that your project might need is some code to calculate relative dates as human-readable text. You could certainly code this yourself, but there's a strong chance that someone else has already solved this problem — why waste time reinventing the wheel? Moreover, a reliable third-party dependency will likely have been tested in a lot of different situations, making it more robust and cross-browser compatible than your own solution. A project dependency can be an entire JavaScript library or framework — such as React or Vue — or a very small utility like our human-readable date library, or it can be a command line tool such as Prettier or ESLint, which we talked about in previous articles. Without modern build tools, dependencies like this might be included in your project using a

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management


id: package-management-basics-learn-web-development-mdn-20260505-2
category: reference
title: Package management basics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:14.165514+00:00
instance: kb-cron
parent: package-management-basics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management-2.md

summary:
In addition, package managers handle duplicate dependencies (something that becomes important and common in front-end development). In the case of npm (and JavaScript- and Node-based package managers) you have two options for where you install your dependencies. As we touched on in the previous article, dependencies can be installed globally or locally to your project. Although there tend to be more pros for installing globally, the pros for installing locally are more important — such as code portability and version locking. For example, if your project relied on webpack with a certain configuration, you'd want to ensure that if you installed that project on another machine or returned to it much later on, the configuration would still work. If a different version of webpack was installed, it may not be compatible. To mitigate this, dependencies are installed locally to a project. To see local dependencies really shine, all you need to do is try to download and run an existing project — if it works and all the dependencies work right out of the box, then you have local dependencies to thank for the fact that the code is portable. **Note:** npm is not the only package manager available. A

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management


id: package-management-basics-learn-web-development-mdn-20260505-3
category: reference
title: Package management basics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:14.165514+00:00
instance: kb-cron
parent: package-management-basics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management-3.md

summary:
Add these lines right below the `"name"`: So this is the config file that defines your package. This is good for now, so let's move on. **Note:** [The package.json file](https://scrimba.com/intro-to-git-c0l4grs2sa) [_MDN learning partner_](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds) from Scrimba provides a practical introduction to using `package.json` files. ### [Installing Vite](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management#installing_vite) We will first install Vite, the build tool for our website. It is responsible for bundling our HTML, CSS, and JavaScript files into an optimized bundle for the browser. Once that's done _All The Things_ , take another look at your package.json file. You'll see that npm has added a new field, `devDependencies`: This is part of the npm magic — if in the future you move your codebase to another location, on another machine, you can recreate the same setup by running the command `npm install`, and npm will look at the dependencies and install them for you. One disadvantage is that Vite is only available inside our `npm-experiment` app; you won't be able to run it in a different directory. But the advantages outweigh the disadvantages. Note that we chose to install `vite` as a dev dependency. This difference rarely matters for an application, but for a library, it means when others


id: package-management-basics-learn-web-development-mdn-20260505-4
category: reference
title: Package management basics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:14.165514+00:00
instance: kb-cron
parent: package-management-basics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management-4.md

summary:
In the `src/main.jsx` file, add the following code and save it: Go back to `http://localhost:5173` and you'll see a graph on the page. Change the different numbers and see the graph updated every time you save your file. ### [Building our code for production](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management#building_our_code_for_production) However, this code is not ready for production. Most build tooling systems, including Vite, have a "development mode" and a "production mode". The important difference is that a lot of the helpful features you will use in development are not needed in the final site, so will be stripped out for production, e.g., "hot module replacement", "live reloading", and "uncompressed and commented source code". Though far from exhaustive, these are some of the common web development features that are very helpful at the development stage but are not very useful in production. In production, they will just bloat your site. Now stop the running Vite dev server using `Ctrl` + `C`. We can now prepare our bare bones example site for an imaginary deployment. Vite provides an additional `build` command to generate files that are suited to publication. Run the following command: You should see an output like so: ``` vite v5.2.13 building for production... ✓


id: package-management-basics-learn-web-development-mdn-20260505-5
category: reference
title: Package management basics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:14.165514+00:00
instance: kb-cron
parent: package-management-basics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management-5.md

summary:
npm and pnpm are similar from a command line point of view — in fact, pnpm aims to have full parity over the argument options that npm offers. It differs in that it uses a different method for downloading and storing the packages on your computer, aiming to reduce the overall disk space required. Where npm is shown in the examples below, pnpm can be swapped in and the command will work. Yarn is often thought to be quicker than npm in terms of the installation process (though your mileage may vary). This is important to developers because there can be a significant amount of time wasted on waiting for dependencies to install (and copy to the computer). However, worth noting that the npm package manager is **not** required to install packages from the npm registry. pnpm and Yarn can consume the same `package.json` format as npm, and can install any package from the npm and other package registries. Let's review the common actions you'll want to perform with package managers. **Note:** We will demonstrate both npm and Yarn commands. They are not meant to be run in the same project. You should set up your project with either npm


id: package-management-basics-learn-web-development-mdn-20260505-6
category: reference
title: Package management basics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:14.165514+00:00
instance: kb-cron
parent: package-management-basics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management-6.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Mar 15, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/client-side_tools/package_management/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/client-side_tools/package_management \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_tools%2FPackage_management&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fclient-side_tools%2Fpackage_management%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_tools%2FPackage_management%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fclient-side_tools%2Fpackage_management%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F94e900db86109d76e8a1e120e3b135db0d543c87%0A*+Document+last+modified%3A+2026-03-15T20%3A34%3A42.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: package-management-basics-learn-web-development-mdn-20260505-7
category: reference
title: Package management basics - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:14.165514+00:00
instance: kb-cron
parent: package-management-basics-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Package_management-7.md


id: web-forms-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms-0.md
category: reference
title: Web forms - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms
date_saved: 2026-05-05T05:59:16.509007+00:00
instance: kb-cron
parent: web-forms-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API


id: web-forms-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms-1.md
category: reference
title: Web forms - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms
date_saved: 2026-05-05T05:59:16.509007+00:00
instance: kb-cron
parent: web-forms-learn-web-development-mdn-20260505-0
summary:
[Customizable select elements](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select) This article explains how to use dedicated, modern HTML and CSS features together to create fully-customized `<select>` elements. This includes having full control over styling the select button, drop-down picker, arrow icon, current selection checkmark, and each individual `<option>` element. [Customizable select listboxes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select_listboxes) This article follows on from the previous one, looking at how to style customizable listbox `<select>` elements. [UI pseudo-classes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes) An introduction to the UI pseudo-classes enabling HTML form controls to be targeted based on their current state. ## [Validating and submitting form data](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms#validating_and_submitting_form_data) [Client-side form validation](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation) Sending data is not enough — we also need to make sure that the data users enter into forms is in the correct format to process it successfully, and that it won't break our applications. We also want to help our users to fill out our forms correctly and not get frustrated when trying to use our apps. Form validation helps us achieve these goals — this article tells you what you need to know. [Sending form data](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data) This article looks at what happens when a user submits a form — where does the data go, and how do we handle it when it gets there? We also


id: web-forms-learn-web-development-mdn-20260505-2
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms-2.md
category: reference
title: Web forms - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms
date_saved: 2026-05-05T05:59:16.509007+00:00
instance: kb-cron
parent: web-forms-learn-web-development-mdn-20260505-0
summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Mar 17, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/forms/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/forms \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FForms&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fforms%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fforms%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F76936e1d9ff271ac59307a0f858d0d7b57f3866a%0A*+Document+last+modified%3A+2026-03-17T08%3A00%3A39.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: advanced-form-styling-learn-web-development-mdn-20260505-0
category: reference
title: Advanced form styling - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:18.928103+00:00
instance: kb-cron
parent: advanced-form-styling-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling


id: advanced-form-styling-learn-web-development-mdn-20260505-1
category: reference
title: Advanced form styling - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:18.928103+00:00
instance: kb-cron
parent: advanced-form-styling-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling-1.md

summary:
## [`appearance`: controlling OS-level styling](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling#appearance_controlling_os-level_styling) In the previous article, we mentioned that historically, the styling of web form controls was largely derived from the underlying operating system, which is part of the reason for the difficulty in customizing the look of these controls. The [`appearance`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/appearance) property was created as a way to control what OS- or system-level styling was applied to web form controls. By far the most helpful value, and probably the only one you'll use, is `none`. This stops any control you apply it to from using system-level styling, as much as possible, and lets you build up the styles yourself using CSS. For example, let's take the following controls: Applying the following CSS to them removes system-level styling. The following live example shows you what they look like in your system — default on the left, and with the above CSS applied on the right. In most cases, the effect is to remove the stylized border, which makes CSS styling a bit easier, but isn't essential. In a couple of cases, such as radio buttons and checkboxes, it becomes way more useful. We'll look at those now. ### [Search boxes and `appearance`](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling#search_boxes_and_appearance) The `appearance: none;` value used

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling


id: advanced-form-styling-learn-web-development-mdn-20260505-2
category: reference
title: Advanced form styling - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:18.928103+00:00
instance: kb-cron
parent: advanced-form-styling-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling-2.md

summary:
## [What can be done about the "ugly" elements?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling#what_can_be_done_about_the_ugly_elements) Now let's turn our attention to the "ugly" controls — the ones that are really hard to thoroughly style. In short, these are drop-down boxes, complex control types like [`color`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/color) and [`datetime-local`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/datetime-local), and feedback—oriented controls like [`<progress>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/progress) and [`<meter>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meter). The problem is that these elements have very different default looks across browsers, and while you can style them in some ways, some parts of their internals are impossible to style. If you are prepared to live with some differences in look and feel, you can use some simple styling to improve things significantly. This includes consistent sizing and styling of properties like `background-color`, and usage of `appearance` to remove some system-level styling. Take the following example, which shows a number of the "ugly" form features in action: You can also press the **Play** button to run the example in MDN Playground and edit the source code. This example has the following CSS applied to it: We've added some JavaScript to the page that lists the files selected by the file picker, below the control itself. This is a simplified version of the example found on the [`<input type="file">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file#examples) reference page: ###

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling


id: advanced-form-styling-learn-web-development-mdn-20260505-3
category: reference
title: Advanced form styling - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:18.928103+00:00
instance: kb-cron
parent: advanced-form-styling-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling-3.md

summary:
You can also press the **Play** button to run the example in MDN Playground and edit the source code. ### [Meters and progress bars](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling#meters_and_progress_bars) [`<meter>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meter) and [`<progress>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/progress) are possibly the worst of the lot. As you saw in the earlier example, we can set them to the desired width relatively accurately. But beyond that, they are really difficult to style in any way. They don't handle height settings consistently between each other and between browsers, you can color the background but not the foreground bar, and setting `appearance: none` on them makes things worse, not better. It is easier to create your own custom solution for these features if you want to control the styling, or use a third-party solution such as [progressbar.js](https://kimmobrunfeldt.github.io/progressbar.js/#examples). ## [Summary](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling#summary) While there are still difficulties using CSS with HTML forms, there are ways to get around many of the problems. There are no clean, universal solutions, but modern browsers offer new possibilities. For now, the best solution is to learn more about the way the different browsers support CSS when applied to HTML form controls. In the next article of this module, we will explore creating [fully-customized `<select>` elements](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select) using the dedicated, modern HTML and


id: advanced-form-styling-learn-web-development-mdn-20260505-4
category: reference
title: Advanced form styling - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:18.928103+00:00
instance: kb-cron
parent: advanced-form-styling-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling-4.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Dec 19, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/forms/advanced_form_styling/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/forms/advanced_form_styling \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FAdvanced_form_styling&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fforms%2Fadvanced_form_styling%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FAdvanced_form_styling%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fforms%2Fadvanced_form_styling%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F2b4a2ad5d9ba084a9eaa2f9204102655e7b575c4%0A*+Document+last+modified%3A+2025-12-19T19%3A59%3A21.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: advanced-form-styling-learn-web-development-mdn-20260505-5
category: reference
title: Advanced form styling - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:18.928103+00:00
instance: kb-cron
parent: advanced-form-styling-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling-5.md


id: basic-native-form-controls-learn-web-development-mdn-20260505-0
category: reference
title: Basic native form controls - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:21.441481+00:00
instance: kb-cron
parent: basic-native-form-controls-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls


id: basic-native-form-controls-learn-web-development-mdn-20260505-1
category: reference
title: Basic native form controls - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:21.441481+00:00
instance: kb-cron
parent: basic-native-form-controls-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls-1.md

summary:
**Note:** The [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input) element is unique amongst HTML elements because it can take many forms depending on its [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#type) attribute value. It is used for creating most types of form widgets including single line text fields, time and date controls, controls without text input like checkboxes, radio buttons, and color pickers, and buttons. ### [Single line text fields](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls#single_line_text_fields) A single line text field is created using an [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input) element whose [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#type) attribute value is set to `text`, or by omitting the [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#type) attribute altogether (`text` is the default value). The value `text` for this attribute is also the fallback value if the value you specify for the [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#type) attribute is unknown by the browser (for example if you specify `type="color"` and the browser doesn't support native color pickers). **Note:** You can find examples of all the single line text field types on GitHub at [single-line-text-fields.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/single-line-text-fields.html) ([see it live also](https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html)). Here is a basic single line text field example: Single line text fields have only one true constraint: if you type text with line breaks, the browser removes those line breaks before sending the data to the server. The screenshot below shows a text input in default, focused, and disabled states.

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls


id: basic-native-form-controls-learn-web-development-mdn-20260505-2
category: reference
title: Basic native form controls - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:21.441481+00:00
instance: kb-cron
parent: basic-native-form-controls-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls-2.md

summary:
The following screenshot shows default and disabled radio buttons in the checked state, along with a focused radio button in the unchecked state. ![Default, focused and disabled Radio buttons in chrome 115 on macOS](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls/radios.png) ## [Actual buttons](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls#actual_buttons) The radio button isn't actually a button, despite its name; let's move on and look at actual buttons! There are three input types that produce buttons:

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls


id: basic-native-form-controls-learn-web-development-mdn-20260505-3
category: reference
title: Basic native form controls - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:21.441481+00:00
instance: kb-cron
parent: basic-native-form-controls-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls-3.md

summary:
[`submit`](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls#submit_2) Sends the form data to the server. For [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button) elements, omitting the `type` attribute (or an invalid value of `type`) results in a submit button. [`reset`](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls#reset_2) Resets all form widgets to their default values. [`button`](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls#button) Buttons that have no automatic effect but can be customized using JavaScript code. Then we also have the [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button) element itself. This can take a `type` attribute of value `submit`, `reset`, or `button` to mimic the behavior of the three `<input>` types mentioned above. The main difference between the two is that actual `<button>` elements are much easier to style. **Note:** The `image` input type also renders as a button. We'll cover that later too. **Note:** You can find the examples from this section on GitHub as [button-examples.html](https://github.com/mdn/learning-area/blob/main/html/forms/native-form-widgets/button-examples.html) ([see it live also](https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html)). Below you can find examples of each button `<input>` type, along with the equivalent `<button>` type. ### [submit](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls#submit) ### [reset](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls#reset) ### [anonymous](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls#anonymous) Buttons always behave the same whether you use a [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button) element or an [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input) element. As you can see from the examples, however, [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button) elements let you use HTML in their content, which is inserted between the opening and closing `<button>` tags. [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input) elements on the other hand are [void


id: basic-native-form-controls-learn-web-development-mdn-20260505-4
category: reference
title: Basic native form controls - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:21.441481+00:00
instance: kb-cron
parent: basic-native-form-controls-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls-4.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Nov 14, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/forms/basic_native_form_controls/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/forms/basic_native_form_controls \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FBasic_native_form_controls&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fforms%2Fbasic_native_form_controls%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FBasic_native_form_controls%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fforms%2Fbasic_native_form_controls%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Fcc7f29133a331628d623e8cd705394b538d4368c%0A*+Document+last+modified%3A+2025-11-14T09%3A19%3A45.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: basic-native-form-controls-learn-web-development-mdn-20260505-5
category: reference
title: Basic native form controls - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:21.441481+00:00
instance: kb-cron
parent: basic-native-form-controls-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls-5.md


id: customizable-select-elements-learn-web-development-mdn-20260505-0
category: reference
title: Customizable select elements - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
date_saved: 2026-05-05T05:59:24.203586+00:00
instance: kb-cron
parent: customizable-select-elements-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API


id: customizable-select-elements-learn-web-development-mdn-20260505-1
category: reference
title: Customizable select elements - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
date_saved: 2026-05-05T05:59:24.203586+00:00
instance: kb-cron
parent: customizable-select-elements-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select-1.md

summary:
## [Background](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select#background) Traditionally it has been difficult to customize the look and feel of `<select>` elements because they contain internals that are styled at the operating system level, which can't be targeted using CSS. This includes the drop-down picker, arrow icon, and so on. Previously, the best available option — aside from using a custom JavaScript library — was to set an [`appearance`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/appearance) value of `none` on the `<select>` element to strip away some of the OS-level styling, and then use CSS to customize the bits that can be styled. This technique is explained in [Advanced form styling](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling). Customizable `<select>` elements provide a solution to these issues. They allow you to build examples like the following, using only HTML and CSS, which are fully customized in [supporting browsers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select#browser_compatibility). This includes `<select>` and drop-down picker layout, color scheme, icons, font, transitions, positioning, markers to indicate the selected icon, and more. In addition, they provide a progressive enhancement on top of existing functionality, falling back to "classic" selects in non-supporting browsers. You'll find out how to build this example in the sections below. **Note:** This article covers the background behind customizable selects and shows how to build "single dropdown" selects that take


id: customizable-select-elements-learn-web-development-mdn-20260505-2
category: reference
title: Customizable select elements - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
date_saved: 2026-05-05T05:59:24.203586+00:00
instance: kb-cron
parent: customizable-select-elements-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select-2.md

summary:
In addition, the `<select>` element and its drop-down picker have an implicit anchor reference, meaning that the picker is automatically associated with the `<select>` element via [CSS anchor positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Anchor_positioning). The browser default styles position the picker relative to the button (the anchor) and you can customize this position as explained in [Positioning elements relative to their anchor](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Anchor_positioning/Using#positioning_elements_relative_to_their_anchor). The browser default styles also define some position-try fallbacks that reposition the picker if it is in danger of overflowing the viewport. Position try fallback are explained in [Handling overflow: try fallbacks and conditional hiding](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Anchor_positioning/Try_options_hiding). **Note:** You can check browser support for customizable `<select>` by viewing the browser compatibility tables on the reference pages for related features such as [`<selectedcontent>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/selectedcontent), [`::picker(select)`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::picker), and [`::checkmark`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::checkmark). Let's look at all of the above features in action, by walking through the example shown at the top of the page. ## [Customizable select markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select#customizable_select_markup) Our example is a typical [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select) menu that allows you to choose a pet. The markup is as follows: **Note:** The [`aria-hidden="true"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-hidden) attribute is included on the icons so that they will be hidden from assistive technologies, avoiding the option values being announced twice (for example, "cat cat"). The example markup is nearly the


id: customizable-select-elements-learn-web-development-mdn-20260505-3
category: reference
title: Customizable select elements - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
date_saved: 2026-05-05T05:59:24.203586+00:00
instance: kb-cron
parent: customizable-select-elements-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select-3.md

summary:
This design allows non-supporting browsers to fall back to a classic `<select>` experience. The `<button><selectedcontent></selectedcontent></button>` structure will be ignored completely, and the non-text `<option>` contents will be stripped out to just leave the text node contents, but the result will still function. ## [Opting in to the custom select rendering](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select#opting_in_to_the_custom_select_rendering) To opt-in to the custom select functionality and minimal browser base styles (and remove the OS-provided styling), your `<select>` element and its drop-down picker (represented by the `::picker(select)` pseudo-element) both need to have an [`appearance`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/appearance) value of `base-select` set on them: You can choose to opt-in just the `<select>` element to the new functionality, leaving the picker with the default OS styling, but in most cases, you'll want to opt-in both. You can't opt-in the picker without opting in the `<select>` element. Once this is done, the result is a very plain rendering of a `<select>` element: You are now free to style this in any way you want. To begin with, the `<select>` element has custom [`border`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border), [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background) (which changes on [`:hover`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:hover) or [`:focus`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:focus)), and [`padding`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/padding) values set, plus a [`transition`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition) so that the background change animates smoothly: ## [Styling the picker icon](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select#styling_the_picker_icon) To style the icon inside the


id: customizable-select-elements-learn-web-development-mdn-20260505-4
category: reference
title: Customizable select elements - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
date_saved: 2026-05-05T05:59:24.203586+00:00
instance: kb-cron
parent: customizable-select-elements-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select-4.md

summary:
This causes all properties that change value when the popover state changes from hidden to showing to animate. The list of transitioned properties features `opacity`, however it also includes two discrete properties whose values are set by the browser default styles:


id: customizable-select-elements-learn-web-development-mdn-20260505-5
category: reference
title: Customizable select elements - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
date_saved: 2026-05-05T05:59:24.203586+00:00
instance: kb-cron
parent: customizable-select-elements-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select-5.md

summary:
[`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display) The `display` values changes from `none` to `block` when the popover changes state from hidden to shown. This needs to be animated to ensure that other transitions are visible. [`overlay`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overlay) The `overlay` value changes from `none` to `auto` when the popover changes state from hidden to shown, to promote it to the [top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer), then back again when it is hidden to remove it. This needs to be animated to ensure the removal of the popover from the top layer is deferred until the transition completes, ensuring the transition is visible. **Note:** The [`allow-discrete`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition-behavior#allow-discrete) value is needed to enable discrete property animations. Next, the picker is selected in the showing state using `:open::picker(select)` and given an `opacity` value to `1` — this is the end state of the transition: Finally, because the picker is being transitioned while it is moving from `display: none` to a `display` value that makes it visible, the transition's starting state has to be specified inside a [`@starting-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@starting-style) block: These rules work together to make the picker smoothly fade in and fade out when the `<select>` is opened and closed. ## [Positioning the picker using anchor positioning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select#positioning_the_picker_using_anchor_positioning) A customizable `<select>` element's select button and drop-down


id: customizable-select-elements-learn-web-development-mdn-20260505-6
category: reference
title: Customizable select elements - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
date_saved: 2026-05-05T05:59:24.203586+00:00
instance: kb-cron
parent: customizable-select-elements-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select-6.md

summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Apr 6, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/forms/customizable_select/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/forms/customizable_select \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FCustomizable_select&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fforms%2Fcustomizable_select%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FCustomizable_select%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fforms%2Fcustomizable_select%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F09d8ff096be97b28ea415fc4c68fb1cff0ff8af9%0A*+Document+last+modified%3A+2026-04-06T19%3A43%3A24.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: customizable-select-elements-learn-web-development-mdn-20260505-7
category: reference
title: Customizable select elements - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
date_saved: 2026-05-05T05:59:24.203586+00:00
instance: kb-cron
parent: customizable-select-elements-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select-7.md


id: customizable-select-listboxes-learn-web-development-mdn-20260505-0
category: reference
title: Customizable select listboxes - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:27.201297+00:00
instance: kb-cron
parent: customizable-select-listboxes-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select_listboxes-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select_listboxes#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select_listboxes#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select_listboxes


id: customizable-select-listboxes-learn-web-development-mdn-20260505-1
category: reference
title: Customizable select listboxes - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:27.201297+00:00
instance: kb-cron
parent: customizable-select-listboxes-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select_listboxes-1.md

summary:
## [A basic customized listbox](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select_listboxes#a_basic_customized_listbox) Let's walk through a basic example to show how a customized listbox is implemented. The markup for this example looks like so: There is nothing remarkable here. Note that we are rendering our listbox using `<select multiple>` rather than `<select size="3">`. The only difference is that we can select multiple options rather than a single option. The styling works in exactly the same way. We begin our styling by opting the `<select>` into custom styling with an [`appearance`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/appearance) value of `base-select`: With that done, we can now style our [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select) and [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/option) elements however we want. Our basic styles look like this: Next, we set an [`order`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/order) value of `1` on the [`::checkmark`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::checkmark) pseudo-element to make the checkmark for selected options appear on the right rather than the left, and set a custom checkmark icon using the [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/content) property. Finally, we set a `bold` [`font-weight`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-weight) on [`:checked`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:checked) options, and a custom [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background) color for option [`:hover`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:hover) and [`:focus`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:focus) states so that you always know which option you have hovered or focused. This example renders like so: ## [Listbox style variations](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select_listboxes#listbox_style_variations) Because customized listboxes are just standard HTML elements, you can style them however you want.

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select_listboxes


id: customizable-select-listboxes-learn-web-development-mdn-20260505-2
category: reference
title: Customizable select listboxes - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:27.201297+00:00
instance: kb-cron
parent: customizable-select-listboxes-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select_listboxes-2.md

summary:
The next bit of code adds a [`change`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event "change") event listener to the `<select>` element so that every time an `<option>` is selected or deselected, the `selected` status of the objects in the `contacts` array is synchronized with the selected status of the currently displayed `<option>` objects. This is required because every time we apply a new filter to our `<select>` element, the displayed `<option>` elements are freshly generated from the `contacts` array, which includes their selected state. If we didn't do this, we would lose our selected options each time we changed the filter. There is no way to detect exactly which `<option>` has been changed each time one is toggled, so we have solved the problem like this: 1. Get an array of all the currently displayed `<option>` values by creating an array from the [`select.options`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/options "select.options") collection using [`Array.from`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from), then mapping it using its [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) method to replace each `<option>` in the array with its value. 2. Get an array of all the currently selected `<option>` values using the same methodology, except that this time we create the input array from the [`select.selectedOptions`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions "select.selectedOptions") collection. 3. For each contact object in the `contacts` array, check whether the

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select_listboxes


id: customizable-select-listboxes-learn-web-development-mdn-20260505-3
category: reference
title: Customizable select listboxes - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:27.201297+00:00
instance: kb-cron
parent: customizable-select-listboxes-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select_listboxes-3.md

summary:
Finally, we run the `populateOptions()` function, passing it the `contacts` array, so that on page load the full list of contacts is displayed. ### [Result](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select_listboxes#result) The example renders like so: ## [Next up](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select_listboxes#next_up) In the next article of this module, we will explore the different [UI pseudo-classes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes) available to us in modern browsers for styling forms in different states. ## [See also](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select_listboxes#see_also) * [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select), [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/option), [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/optgroup), [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label) * [`appearance`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/appearance) * [`::checkmark`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::checkmark) * [`:checked`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:checked) * [Customizable select elements](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select) * [ Previous ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select) * [ Overview: Web forms](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms) * [ Next ](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes) ## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Apr 6, 2026 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select_listboxes/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/forms/customizable_select_listboxes/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/forms/customizable_select_listboxes \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FCustomizable_select_listboxes&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fforms%2Fcustomizable_select_listboxes%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FCustomizable_select_listboxes%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fforms%2Fcustomizable_select_listboxes%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F09d8ff096be97b28ea415fc4c68fb1cff0ff8af9%0A*+Document+last+modified%3A+2026-04-06T19%3A43%3A24.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the


id: customizable-select-listboxes-learn-web-development-mdn-20260505-4
category: reference
title: Customizable select listboxes - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:27.201297+00:00
instance: kb-cron
parent: customizable-select-listboxes-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select_listboxes-4.md


id: client-side-form-validation-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation-0.md
category: reference
title: Client-side form validation - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation
date_saved: 2026-05-05T05:59:30.065069+00:00
instance: kb-cron
parent: client-side-form-validation-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API


id: client-side-form-validation-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation-1.md
category: reference
title: Client-side form validation - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation
date_saved: 2026-05-05T05:59:30.065069+00:00
instance: kb-cron
parent: client-side-form-validation-learn-web-development-mdn-20260505-0
summary:
This is called **form validation**. When you enter data, the browser (and the web server) will check to see that the data is in the correct format and within the constraints set by the application. Validation done in the browser is called **client-side** validation, while validation done on the server is called **server-side** validation. In this chapter we are focusing on client-side validation. If the information is correctly formatted, the application allows the data to be submitted to the server and (usually) saved in a database; if the information isn't correctly formatted, it gives the user an error message explaining what needs to be corrected, and lets them try again. We want to make filling out web forms as easy as possible. So why do we insist on validating our forms? There are three main reasons: * **We want to get the right data, in the right format.** Our applications won't work properly if our users' data is stored in the wrong format, is incorrect, or is omitted altogether. * **We want to protect our users' data**. Forcing our users to enter secure passwords makes it easier to protect their account information. * **We want to protect ourselves**. There are


id: client-side-form-validation-learn-web-development-mdn-20260505-2
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation-2.md
category: reference
title: Client-side form validation - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation
date_saved: 2026-05-05T05:59:30.065069+00:00
instance: kb-cron
parent: client-side-form-validation-learn-web-development-mdn-20260505-0
summary:
## [Built-in form validation examples](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation#built-in_form_validation_examples) In this section, we'll test out some of the attributes that we discussed above. ### [Basic starter file](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation#basic_starter_file) Let's start with a basic example: an input that allows you to choose whether you prefer a banana or a cherry. This example involves a text [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input) with an associated [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label) and a submit [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button). To begin, make a copy of the previous HTML listing in a new `index.html` file. Save it in a new directory on your hard drive. ### [The required attribute](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation#the_required_attribute) A common HTML validation feature is the [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/required) attribute. Add this attribute to an input to make an element mandatory. When this attribute is set, the element matches the [`:required`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:required) UI pseudo-class and the form won't submit, displaying an error message on submission, if the input is empty. While empty, the input will also be considered invalid, matching the [`:invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:invalid) UI pseudo-class. If any radio button in a same-named group has the `required` attribute, one of the radio buttons in that group must be checked for the group to be valid; the checked radio doesn't have to be the one with the attribute set. **Note:** Only require users to input data you need:


id: client-side-form-validation-learn-web-development-mdn-20260505-3
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation-3.md
category: reference
title: Client-side form validation - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation
date_saved: 2026-05-05T05:59:30.065069+00:00
instance: kb-cron
parent: client-side-form-validation-learn-web-development-mdn-20260505-0
summary:
There are many more possibilities that we don't cover here. For a complete list and many examples, consult our [Regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) documentation. Let's implement an example. Update your HTML to add a [`pattern`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/pattern) attribute like this: This gives us the following update — try it out: You can also press the **Play** button to open the example in MDN Playground and edit the source code there. In this example, the [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input) element accepts one of four possible values: the strings "banana", "Banana", "cherry", or "Cherry". Regular expressions are case-sensitive, but we've made it support capitalized as well as lower-case versions using an extra "Aa" pattern nested inside square brackets. At this point, try changing the value inside the [`pattern`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/pattern) attribute to equal some of the examples you saw earlier, and look at how that affects the values you can enter to make the input value valid. Try writing some of your own, and see how it goes. Make them fruit-related where possible so that your examples make sense! If a non-empty value of the [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input) doesn't match the regular expression's pattern, the `input` will match the [`:invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:invalid) pseudo-class. If empty, and the element is not required, it is not considered


id: client-side-form-validation-learn-web-development-mdn-20260505-4
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation-4.md
category: reference
title: Client-side form validation - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation
date_saved: 2026-05-05T05:59:30.065069+00:00
instance: kb-cron
parent: client-side-form-validation-learn-web-development-mdn-20260505-0
summary:
The Constraint Validation API makes the following properties available on the above elements. * `validationMessage`: Returns a localized message describing the validation constraints that the control doesn't satisfy (if any). If the control is not a candidate for constraint validation (`willValidate` is `false`) or the element's value satisfies its constraints (is valid), this will return an empty string. * `validity`: Returns a `ValidityState` object that contains several properties describing the validity state of the element. You can find full details of all the available properties in the [`ValidityState`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) reference page; below is listed a few of the more common ones: * [`patternMismatch`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/patternMismatch "patternMismatch"): Returns `true` if the value does not match the specified [`pattern`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#pattern), and `false` if it does match. If true, the element matches the [`:invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:invalid) CSS pseudo-class. * [`tooLong`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/tooLong "tooLong"): Returns `true` if the value is longer than the maximum length specified by the [`maxlength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#maxlength) attribute, or `false` if it is shorter than or equal to the maximum. If true, the element matches the [`:invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:invalid) CSS pseudo-class. * [`tooShort`](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/tooShort "tooShort"): Returns `true` if the value is shorter than the minimum length specified by the [`minlength`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#minlength) attribute, or `false` if it is greater than or equal to the minimum.


id: client-side-form-validation-learn-web-development-mdn-20260505-5
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation-5.md
category: reference
title: Client-side form validation - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation
date_saved: 2026-05-05T05:59:30.065069+00:00
instance: kb-cron
parent: client-side-form-validation-learn-web-development-mdn-20260505-0
summary:
![Example of an error message with Firefox in French on an English page](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation/error-firefox-win7.png) Customizing these error messages is one of the most common use cases of the Constraint Validation API. Let's work through an example of how to do this. We'll start with some HTML. Feel free to put this in another copy of the [basic starter file](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation#basic_starter_file) file, if you like: Add the following JavaScript to the page: Here we store a reference to the email input, then add an event listener to it that runs the contained code each time the value inside the input is changed. Inside the contained code, we check whether the email input's `validity.typeMismatch` property returns `true`, meaning that the contained value doesn't match the pattern for a well-formed email address. If so, we call the [`setCustomValidity()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity "setCustomValidity\(\)") method with a custom message. This renders the input invalid, so that when you try to submit the form, submission fails and the custom error message is displayed. If the `validity.typeMismatch` property returns `false`, we call the `setCustomValidity()` method with an empty string. This renders the input valid, so the form will submit. During validation, if any form control has a `customError` that is not the


id: client-side-form-validation-learn-web-development-mdn-20260505-6
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation-6.md
category: reference
title: Client-side form validation - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation
date_saved: 2026-05-05T05:59:30.065069+00:00
instance: kb-cron
parent: client-side-form-validation-learn-web-development-mdn-20260505-0
summary:
[What should I do if the form doesn't validate?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation#what_should_i_do_if_the_form_doesnt_validate) This is clearly a UI matter. You have to decide how the form will behave. Does the form send the data anyway? Should you highlight the fields that are in error? Should you display error messages? [How can I help the user to correct invalid data?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation#how_can_i_help_the_user_to_correct_invalid_data) In order to reduce the user's frustration, it's very important to provide as much helpful information as possible in order to guide them in correcting their inputs. You should offer up-front suggestions so they know what's expected, as well as clear error messages. If you want to dig into form validation UI requirements, here are some useful articles you should read: * [Help users enter the right data in forms](https://web.dev/learn/forms/form-fields) * [Validating input](https://www.w3.org/WAI/tutorials/forms/validation/) * [How to Report Errors in Forms: 10 Design Guidelines](https://www.nngroup.com/articles/errors-forms-design-guidelines/) #### An example that doesn't use the constraint validation API In order to illustrate this, the following is a simplified version of the previous example without the Constraint Validation API. The HTML is almost the same; we just removed the HTML validation features. Similarly, the CSS doesn't need to change very much; we've just turned the [`:invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:invalid) CSS pseudo-class into a real


id: client-side-form-validation-learn-web-development-mdn-20260505-7
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation-7.md
category: reference
title: Client-side form validation - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation
date_saved: 2026-05-05T05:59:30.065069+00:00
instance: kb-cron
parent: client-side-form-validation-learn-web-development-mdn-20260505-0
summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Dec 5, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/forms/form_validation/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/forms/form_validation \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FForm_validation&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fforms%2Fform_validation%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FForm_validation%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fforms%2Fform_validation%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F2290fdbf9d5cf68482245d07d388b883156058ac%0A*+Document+last+modified%3A+2025-12-05T15%3A00%3A19.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: the-html5-input-types-learn-web-development-mdn-20260505-0
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types-0.md
category: reference
title: The HTML5 input types - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types
date_saved: 2026-05-05T05:59:33.122256+00:00
instance: kb-cron
parent: the-html5-input-types-learn-web-development-mdn-20260505-0
summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API


id: the-html5-input-types-learn-web-development-mdn-20260505-1
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types-1.md
category: reference
title: The HTML5 input types - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types
date_saved: 2026-05-05T05:59:33.122256+00:00
instance: kb-cron
parent: the-html5-input-types-learn-web-development-mdn-20260505-0
summary:
## [Email address field](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types#email_address_field) This type of field is set using the value `email` for the [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#type) attribute: When this [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#type) is used, the value must be an email address to be valid. Any other content causes the browser to display an error when the form is submitted. You can see this in action in the screenshot below. ![An invalid email input showing the message "Please enter an email address."](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types/email_address_invalid.png) You can use the [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/multiple) attribute in combination with the `email` input type to allow several comma-separated email addresses to be entered in the same input: On some devices — notably, touch devices with dynamic keyboards like smartphones — a different virtual keypad might be presented that is more suitable for entering email addresses, including the `@` key: ![Firefox for Android email keyboard, with the at sign displayed by default.](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types/fx-android-email-type-keyboard.jpg) **Note:** You can find examples of the basic text input types at [basic input examples](https://mdn.github.io/learning-area/html/forms/basic-input-examples/) (see the [source code](https://github.com/mdn/learning-area/blob/main/html/forms/basic-input-examples/index.html) also). This is another good reason for using these newer input types, improving the user experience for users of these devices. ### [Client-side validation](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types#client-side_validation) As you can see above, `email` — along with other newer `input` types — provides built-in _client-side_


id: the-html5-input-types-learn-web-development-mdn-20260505-2
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types-2.md
category: reference
title: The HTML5 input types - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types
date_saved: 2026-05-05T05:59:33.122256+00:00
instance: kb-cron
parent: the-html5-input-types-learn-web-development-mdn-20260505-0
summary:
To that end, it's highly recommended that you set the [`min`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/min), [`max`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/max), and [`step`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/step) attributes which set the minimum, maximum, and increment values, respectively. Let's look at the code behind the above example, so you can see how it's done. First of all, the basic HTML: This example creates a slider whose value may range between `50000` and `500000`, which increments/decrements by 1000 at a time. We've given it a default value of `250000`, using the `value` attribute. One problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. This is why we've included an [`<output>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/output) element to contain the current value. You could display an input value or the output of a calculation inside any element, but `<output>` is special — like `<label>` — and it can take a `for` attribute that allows you to associate it with the element or elements that the output value came from. To actually display the current value, and update it as it changes, you must use JavaScript, which can be accomplished with a few statements: Here we store references to the `range` input and the `output` in two variables. Then we immediately


id: the-html5-input-types-learn-web-development-mdn-20260505-3
file: data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types-3.md
category: reference
title: The HTML5 input types - Learn web development | MDN
tags: web, html, css, javascript, documentation
source_url: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types
date_saved: 2026-05-05T05:59:33.122256+00:00
instance: kb-cron
parent: the-html5-input-types-learn-web-development-mdn-20260505-0
summary:
## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Jul 15, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/forms/html5_input_types/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/forms/html5_input_types \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FHTML5_input_types&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fforms%2Fhtml5_input_types%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FHTML5_input_types%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fforms%2Fhtml5_input_types%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F5f677b960051016819ecb3b1f40bc3d36a43156d%0A*+Document+last+modified%3A+2025-07-15T10%3A50%3A45.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11. [Creating links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) 12. [Test: Links](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links) 13. [Challenge: Bird watching site](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content) 14.


id: html-forms-in-legacy-browsers-learn-web-development-mdn-20260505-0
category: reference
title: HTML forms in legacy browsers - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:36.083109+00:00
instance: kb-cron
parent: html-forms-in-legacy-browsers-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML_forms_in_legacy_browsers-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML_forms_in_legacy_browsers#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML_forms_in_legacy_browsers#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML_forms_in_legacy_browsers


id: html-forms-in-legacy-browsers-learn-web-development-mdn-20260505-1
category: reference
title: HTML forms in legacy browsers - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:36.083109+00:00
instance: kb-cron
parent: html-forms-in-legacy-browsers-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML_forms_in_legacy_browsers-1.md

summary:
##### [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input) The [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input) element can make things a little difficult if you want to apply some CSS by using the element selector: If we remove the border on all inputs, we can restore the default appearance for input buttons only with the global CSS [`revert`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/revert) value. ### [Limit styling in legacy browsers](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML_forms_in_legacy_browsers#limit_styling_in_legacy_browsers) One of the big issues with HTML forms in legacy browsers is styling them with CSS. As covered elsewhere, you can declare [`appearance: none;`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/appearance) to remove the default styles and build your own on top. However, legacy browsers are less likely than modern browsers to support the styling techniques covered earlier in the module. It might be better to just leave form controls unstyled in legacy browsers, if you need to support them. See the next section for advice on detecting support for specific input types. If you must alter the default styles of your form widgets in legacy browsers, define a style guide to ensure consistency among all your form controls so user experience is not destroyed. You could also investigate some hard techniques such as [rebuilding widgets with JavaScript](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls), but it might be more trouble than it's worth. ## [Feature detection and polyfills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML_forms_in_legacy_browsers#feature_detection_and_polyfills) CSS and

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML_forms_in_legacy_browsers


id: html-forms-in-legacy-browsers-learn-web-development-mdn-20260505-2
category: reference
title: HTML forms in legacy browsers - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:36.083109+00:00
instance: kb-cron
parent: html-forms-in-legacy-browsers-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML_forms_in_legacy_browsers-2.md

summary:
[The principles of unobtrusive JavaScript](https://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript) (originally written by Peter-Paul Koch for dev.opera.com) describes these ideas very well. ### [Pay attention to performance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML_forms_in_legacy_browsers#pay_attention_to_performance) Even though some polyfills are very aware of performance, loading additional scripts can affect the performance of your application. This is especially critical with legacy browsers; many of them have a very slow JavaScript engine that can make the execution of all your polyfills painful for the user. Performance is a subject on its own, but legacy browsers are very sensitive to it: basically, they are slow and the more polyfills they need, the more JavaScript they have to process. So they are doubly burdened compared to modern browsers. Test your code with legacy browsers to see how they actually perform. Sometimes, dropping some functionality leads to a better user experience than having exactly the same functionality in all browsers. As a last reminder, just always think about the end users. ## [Conclusion](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML_forms_in_legacy_browsers#conclusion) As you can see, considering browser and operating system default form control appearance is important. There are many techniques to handle these issue; however mastering all of them is beyond the scope of this article. The basic premise is to consider whether altering the default

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML_forms_in_legacy_browsers


id: html-forms-in-legacy-browsers-learn-web-development-mdn-20260505-3
category: reference
title: HTML forms in legacy browsers - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:36.083109+00:00
instance: kb-cron
parent: html-forms-in-legacy-browsers-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML_forms_in_legacy_browsers-3.md

summary:
[6: Working with forms](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms) 9. [7: Deploying](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment) 4. Additional tutorials 1. [Apache .htaccess](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Apache_Configuration_htaccess) 2. [Server MIME type config](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Configuring_server_MIME_types) 3. [Plain Node.js server](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Node_server_without_framework) 25. [Web performance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance) 1. [The "why" of web performance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/why_web_performance) 2. [What is web performance?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/What_is_web_performance) 3. [Perceived performance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/Perceived_performance) 4. [Measuring performance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/Measuring_performance) 5. [Multimedia: Images](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/Multimedia) 6. [Multimedia: video](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/video) 7. [Performant JavaScript](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/JavaScript) 8. [Performant HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/HTML) 9. [Performant CSS](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/CSS) 10. [Performance business case](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/business_case_for_performance) 11. [Best practices & tips](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance/Best_practices) 26. [Testing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing) 1. [Introduction](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Introduction) 2. [Testing strategies](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Testing_strategies) 3. [Common HTML and CSS problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS) 4. [Feature detection](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection) 5. [Automated testing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Automated_testing) 6. [Automation environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment) 27. Further resources 28. [How to solve common problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto) 1. [Common CSS problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems) 2. [Common HTML problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_HTML_problems) 3. [Common JavaScript problems](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Solve_JavaScript_problems) 4. [Design and accessibility](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Design_and_accessibility) 5. [Tools and setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Tools_and_setup) 6. [Web mechanics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics) 29. [About](https://developer.mozilla.org/en-US/docs/Learn_web_development/About) 30. [Resources for educators](https://developer.mozilla.org/en-US/docs/Learn_web_development/Educators) 31. [Changelog](https://developer.mozilla.org/en-US/docs/Learn_web_development/Changelog) [MDN](https://developer.mozilla.org/) Your blueprint for a better internet. * [](https://github.com/mdn/) * [](https://bsky.app/profile/developer.mozilla.org) * [](https://x.com/mozdevnet) * [](https://mastodon.social/@mdn) * [](https://developer.mozilla.org/en-US/blog/rss.xml) MDN * [ About ](https://developer.mozilla.org/en-US/about) * [ Blog ](https://developer.mozilla.org/en-US/blog/) * [ Mozilla careers ](https://www.mozilla.org/en-US/careers/listings/) * [ Advertise with us ](https://developer.mozilla.org/en-US/advertising) * [ MDN Plus ](https://developer.mozilla.org/en-US/plus) * [ Product help ](https://support.mozilla.org/products/mdn-plus) Contribute * [ MDN Community ](https://developer.mozilla.org/en-US/community) * [ Community resources ](https://developer.mozilla.org/en-US/docs/MDN/Community) * [ Writing guidelines ](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines) * [ MDN Discord ](https://developer.mozilla.org/discord) * [ MDN


id: how-to-build-custom-form-controls-learn-web-development-mdn-20260505-0
category: reference
title: How to build custom form controls - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:38.568271+00:00
instance: kb-cron
parent: how-to-build-custom-form-controls-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls


id: how-to-build-custom-form-controls-learn-web-development-mdn-20260505-1
category: reference
title: How to build custom form controls - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:38.568271+00:00
instance: kb-cron
parent: how-to-build-custom-form-controls-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls-1.md

summary:
Finally, let's define how the control's options will behave: * When the control is opened, the selected option is highlighted * When the mouse is over an option, the option is highlighted and the previously highlighted option is returned to its normal state For the purposes of our example, we'll stop with that; however, if you're a careful reader, you'll notice that some behaviors are missing. For example, what do you think will happen if the user hits the tab key while the control is in its open state? The answer is _nothing_. OK, the right behavior seems obvious but the fact is, because it's not defined in our specs, it is very easy to overlook this behavior. This is especially true in a team environment when the people who design the control's behavior are different from the ones who implement it. Another fun example: what will happen if the user hits the up or down arrow keys while the control is in the open state? This one is a little bit trickier. If you consider that the active state and the open state are completely different, the answer is again "nothing will happen" because we did not define any

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls


id: how-to-build-custom-form-controls-learn-web-development-mdn-20260505-2
category: reference
title: How to build custom form controls - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:38.568271+00:00
instance: kb-cron
parent: how-to-build-custom-form-controls-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls-2.md

summary:
**Note:** Also, in most systems there is a way to open the [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select) element with the keyboard to look at all the available choices (this is the same as clicking the [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select) element with a mouse). This is achieved with `Alt` + `Down` on Windows. We didn't implement this in our example, but it would be easy to do so, as the mechanism has already been implemented for the `click` event. ## [Defining the HTML structure and (some) semantics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls#defining_the_html_structure_and_some_semantics) Now that the control's basic functionality has been decided upon, it's time to start building it. The first step is to define its HTML structure and give it some basic semantics. Here is what we need to rebuild a [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select) element: Note the use of class names; these identify each relevant part regardless of the actual underlying HTML elements used. This is important to make sure that we don't bind our CSS and JavaScript to a strong HTML structure, so that we can make implementation changes later without breaking code that uses the control. For example, what if you wish to implement the equivalent of the [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/optgroup) element later on? Class names, however, provide no semantic value. In this current state,

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls


id: how-to-build-custom-form-controls-learn-web-development-mdn-20260505-3
category: reference
title: How to build custom form controls - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:38.568271+00:00
instance: kb-cron
parent: how-to-build-custom-form-controls-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls-3.md

summary:
Because of these risks, it's really important to seriously consider what will happen if your JavaScript doesn't work. We'll discuss options to consider and cover the basics in our example (a full discussion of solving this issue for all scenarios would require a book). Just remember, it is vital to make your script generic and reusable. In our example, if our JavaScript code isn't running, we'll fall back to displaying a standard [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select) element. We include our control and the [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select); which one is displayed depends on the class of the body element, with the class of the body element being updated by the script that makes the control function, when it loads successfully. To achieve this, we need two things: First, we need to add a regular [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select) element before each instance of our custom control. There is a benefit to having this "extra" select even if our JavaScript works as hoped: we will use this select to send data from our custom control along with the rest of our form data. We will discuss this in greater depth later. Second, we need two new classes to let us hide the unneeded element: we visually hide the custom control


id: how-to-build-custom-form-controls-learn-web-development-mdn-20260505-4
category: reference
title: How to build custom form controls - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:38.568271+00:00
instance: kb-cron
parent: how-to-build-custom-form-controls-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls-4.md

summary:
### [Building event callbacks](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls#building_event_callbacks) The groundwork is done. We can now start to define all the functions that will be used each time the user interacts with our control. You need these to handle the various states of custom control. Next, we bind these functions to the appropriate events: At that point, our control will change state according to our design, but its value doesn't get updated yet. We'll handle that next. #### Live example Check out the [full source code](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_3). ### [Handling the control's value](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls#handling_the_controls_value) Now that our control is working, we have to add code to update its value according to user input and make it possible to send the value along with form data. The easiest way to do this is to use a native control under the hood. Such a control will keep track of the value with all the built-in controls provided by the browser, and the value will be sent as usual when a form is submitted. There's no point in reinventing the wheel when we can have all this done for us. As seen previously, we already use a native select control as a fallback for accessibility reasons; we can synchronize its value


id: how-to-build-custom-form-controls-learn-web-development-mdn-20260505-5
category: reference
title: How to build custom form controls - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:38.568271+00:00
instance: kb-cron
parent: how-to-build-custom-form-controls-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls-5.md

summary:
However, our control doesn't have the same functionality that a `<select>` has natively. On the plus side, this control is fully accessible to a screen reader and fully navigable via the keyboard. However, this control isn't a [`<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select) replacement. There is functionality that differs and/or is missing. For example, all four arrows navigate through the options, but clicking the down arrow when the user is on the last button takes them to the first button; it doesn't stop at the top and bottom of the option list like a `<select>` does. We'll leave adding this missing functionality as a reader exercise. ## [Conclusion](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls#conclusion) We have seen all the basics of building a custom form control, but as you can see it's not trivial to do. Before creating your own customized control, consider whether HTML provides alternative elements that can be used to adequately support your requirements. If you do need to create a custom control, it is often easier to rely on third-party libraries instead of building your own. But, if you do create your own, modify existing elements, or use a framework to implement a pre-baked control, remember that creating a usable and accessible form control is more complicated


id: how-to-build-custom-form-controls-learn-web-development-mdn-20260505-6
category: reference
title: How to build custom form controls - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:38.568271+00:00
instance: kb-cron
parent: how-to-build-custom-form-controls-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls-6.md

summary:
If you do create alternative controls via radio buttons, your own JavaScript, or with a 3rd party library, ensure it is accessible and feature-proof; that is, it needs to be able to work better with a variety of browsers whose compatibility with the Web standards they use vary. Have fun! ## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Nov 3, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FHow_to_build_custom_form_controls&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fforms%2Fhow_to_build_custom_form_controls%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FHow_to_build_custom_form_controls%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fforms%2Fhow_to_build_custom_form_controls%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2Fc52ed787442db9d65b21f5c2874fa6bfd08a253a%0A*+Document+last+modified%3A+2025-11-03T17%3A48%3A17.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1.


id: how-to-build-custom-form-controls-learn-web-development-mdn-20260505-7
category: reference
title: How to build custom form controls - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:38.568271+00:00
instance: kb-cron
parent: how-to-build-custom-form-controls-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls-7.md


id: example-1-learn-web-development-mdn-20260505-0
category: reference
title: Example 1 - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:41.473053+00:00
instance: kb-cron
parent: example-1-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_1-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_1#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_1#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_1


id: example-1-learn-web-development-mdn-20260505-1
category: reference
title: Example 1 - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:41.473053+00:00
instance: kb-cron
parent: example-1-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_1-1.md

summary:
## [Basic state](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_1#basic_state) ### [HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_1#html) ### [CSS](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_1#css) ### [Result for basic state](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_1#result_for_basic_state) ## [Active state](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_1#active_state) ### [HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_1#html_2) ### [CSS](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_1#css_2) ### [Result for active state](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_1#result_for_active_state) ## [Open state](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_1#open_state) ### [HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_1#html_3) ### [CSS](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_1#css_3) ### [Result for open state](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_1#result_for_open_state) ## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Oct 13, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_1/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_1/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_1 \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FHow_to_build_custom_form_controls%2FExample_1&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fforms%2Fhow_to_build_custom_form_controls%2Fexample_1%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FHow_to_build_custom_form_controls%2FExample_1%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fforms%2Fhow_to_build_custom_form_controls%2Fexample_1%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F9cfc2285428932f448a1747e347b1e35a3e0172b%0A*+Document+last+modified%3A+2025-10-13T00%3A33%3A39.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_1


id: example-1-learn-web-development-mdn-20260505-2
category: reference
title: Example 1 - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:41.473053+00:00
instance: kb-cron
parent: example-1-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_1-2.md

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_1


id: example-2-learn-web-development-mdn-20260505-0
category: reference
title: Example 2 - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:44.029433+00:00
instance: kb-cron
parent: example-2-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_2-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_2#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_2#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_2


id: example-2-learn-web-development-mdn-20260505-1
category: reference
title: Example 2 - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:44.029433+00:00
instance: kb-cron
parent: example-2-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_2-1.md

summary:
## [JS](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_2#js) ### [HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_2#html) ### [CSS](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_2#css) ### [JavaScript](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_2#javascript) ### [Result](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_2#result) ## [No JS](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_2#no_js) ### [HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_2#html_2) ### [CSS](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_2#css_2) ### [Result](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_2#result_2) ## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Oct 13, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_2/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_2/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_2 \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FHow_to_build_custom_form_controls%2FExample_2&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fforms%2Fhow_to_build_custom_form_controls%2Fexample_2%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FHow_to_build_custom_form_controls%2FExample_2%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fforms%2Fhow_to_build_custom_form_controls%2Fexample_2%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F9cfc2285428932f448a1747e347b1e35a3e0172b%0A*+Document+last+modified%3A+2025-10-13T00%3A33%3A39.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text)

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_2


id: example-2-learn-web-development-mdn-20260505-2
category: reference
title: Example 2 - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:44.029433+00:00
instance: kb-cron
parent: example-2-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_2-2.md

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_2


id: example-3-learn-web-development-mdn-20260505-0
category: reference
title: Example 3 - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:46.534640+00:00
instance: kb-cron
parent: example-3-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_3-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_3#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_3#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_3


id: example-3-learn-web-development-mdn-20260505-1
category: reference
title: Example 3 - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:46.534640+00:00
instance: kb-cron
parent: example-3-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_3-1.md

summary:
## [Change states](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_3#change_states) ### [HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_3#html) ### [CSS](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_3#css) ### [JavaScript](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_3#javascript) ### [Result](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_3#result) ## Help improve MDN [Learn how to contribute](https://developer.mozilla.org/en-US/docs/MDN/Community/Getting_started) This page was last modified on Oct 13, 2025 by [MDN contributors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_3/contributors.txt). [View this page on GitHub](https://github.com/mdn/content/blob/main/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_3/index.md?plain=1 "Folder: en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_3 \(Opens in a new tab\)") • [Report a problem with this content](https://github.com/mdn/content/issues/new?template=page-report.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FHow_to_build_custom_form_controls%2FExample_3&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Flearn_web_development%2Fextensions%2Fforms%2Fhow_to_build_custom_form_controls%2Fexample_3%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FLearn_web_development%2FExtensions%2FForms%2FHow_to_build_custom_form_controls%2FExample_3%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Flearn_web_development%2Fextensions%2Fforms%2Fhow_to_build_custom_form_controls%2Fexample_3%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F9cfc2285428932f448a1747e347b1e35a3e0172b%0A*+Document+last+modified%3A+2025-10-13T00%3A33%3A39.000Z%0A%0A%3C%2Fdetails%3E "This will take you to GitHub to file a new issue.") 1. [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 2. [MDN curriculum](https://developer.mozilla.org/en-US/curriculum/) 3. [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) 4. [Environment setup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup) 1. [Installing software](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software) 2. [Browsing the web](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web) 3. [Code editors](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) 4. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files) 5. [Command line](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Command_line) 5. [Your first website](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website) 1. [What will it look like?](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like) 2. [Creating the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content) 3. [Styling the content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content) 4. [Adding interactivity](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity) 5. [Publishing](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) 6. [Web standards](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards) 1. [How the web works](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works) 2. [The web standards model](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model) 3. [How browsers load websites](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites) 7. [Soft skills](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills) 1. [Research and learning](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning) 2. [Collaboration and teamwork](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) 3. [Workflows and processes](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes) 4. [Finding a job](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Finding_a_job) 8. [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) 9. [Structuring content with HTML](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) 1. [Basic HTML syntax](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax) 2. [Web page metadata](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata) 3. [Headings and paragraphs](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs) 4. [Emphasis and importance](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance) 5. [Lists](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Lists) 6. [Test: HTML text basics](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics) 7. [Advanced text features](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features) 8. [Test: Advanced HTML text](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Advanced_HTML_text) 9. [Challenge: Letter markup](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter) 10. [Structuring documents](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents) 11.

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_3


id: example-3-learn-web-development-mdn-20260505-2
category: reference
title: Example 3 - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:46.534640+00:00
instance: kb-cron
parent: example-3-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_3-2.md

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_3


id: example-4-learn-web-development-mdn-20260505-0
category: reference
title: Example 4 - Learn web development | MDN
tags: web, html, css, javascript, documentation
date_saved: 2026-05-05T05:59:48.815821+00:00
instance: kb-cron
parent: example-4-learn-web-development-mdn-20260505-0
file:
data/developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_4-0.md

summary:
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_4#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_4#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API

source_url:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_4


