HTML inputs

button

<input type="button" value="Click Me"> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button Value A DOMString used as the button's label Events click Supported common attributes type, and value IDL attributes value Methods None

form

<!-- Simple form which will send a GET request --> <form action="" method="get"> <label for="GET-name">Name:</label> <input id="GET-name" type="text" name="name"> <input type="submit" value="Save"> </form> <!-- Simple form which will send a POST request --> <form action="" method="post"> <label for="POST-name">Name:</label> <input id="POST-name" type="text" name="name"> <input type="submit" value="Save"> </form> <!-- Form with fieldset, legend, and label --> <form action="" method="post"> <fieldset> <legend>Title</legend> <input type="radio" name="radio" id="radio"> <label for="radio">Click me</label> </fieldset> </form>

checkbox

<form> <div> <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter"> <label for="subscribeNews">Subscribe to newsletter?</label> </div> <div> <button type="submit">Subscribe</button> </div> </form> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox

img

<img src="mdn-logo-sm.png" alt="MDN"> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

datetime-local

<input> elements of type datetime-local create input controls that let the user easily enter both a date and a time, including the year, month, and day as well as the time in hours and minutes. The user's local time zone is used. The control's UI varies in general from browser to browser; at the moment support is patchy, with only Chrome/Opera and Edge on desktop and most modern versions of mobile browsers having usable implementations. In other browsers, these degrade gracefully to simple <input type="text"> controls. It's worth noting that seconds are not supported. <input id="datetime" type="datetime-local"> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

data list

The HTML <datalist> element contains a set of <option> elements that represent the values available for other controls. <label>Choose a browser from this list: <input list="browsers" name="myBrowser" /></label> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"> <option value="Microsoft Edge"> </datalist> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

fieldset

The HTML <fieldset> element is used to group several controls as well as labels (<label>) within a web form. <form action="test.php" method="post"> <fieldset> <legend>Title</legend> <input type="radio" id="radio"> <label for="radio">Click me</label> </fieldset> </form>

span

The HTML <span> element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline element. Content categories Flow content, phrasing content. Permitted content Phrasing content Tag omission None, both the starting and ending tag are mandatory. Permitted parents Any element that accepts phrasing content, or any element that accepts flow content. Permitted ARIA roles Any DOM interface HTMLSpanElement (before HTML 5, the interface was HTMLElement)

input

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

date

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date <input> elements of type date create input fields that let the user enter a date, either using a text box that automatically validates the content, or using a special date picker interface. The resulting value includes the year, month, and day, but not the time. The time and datetime-local input types support time and date/time inputs. The control's UI varies in general from browser to browser; at the moment support is patchy, see Browser compatibility for further details. In unsupported browsers, the control degrades gracefully to a simple <input type="text">. <input id="date" type="date">