HTML5 & CSS3 Test Area

Add the draggable="true" attribute to the item you want to drag and drop. You also have to add the ondragstart="" attribute event handler to the item you want to drag and drop OR you can use the javascript method addEventHandler().

In order to made an item "droppable" it does require the use of javascript by adding the ondrop="" event handler attribute OR addEventHandler().

Any container that you are dropping the item into, by default, does not allow you to drop anything into it. Use the javascript method preventDefault() to allow dropping.

Note: Drag and Drop doesn't seem to work in mobile browsers unless you use Javascript's touch() API or libraries like jQuery, React, etc. It's disappointing but either way, good luck.

Contenteditable is simple enough. To make a container editable, just add the contenteditable="true" attribute.

Card #1 uses: resize; linear-gradient and rgba() for the background. For desktop, Outline is used with :hover.

Resize note: May not work in mobile browsers (I checked Firefox and Chrome). Resize only works with block elements and only with overflow set to hidden, scroll or auto.

Card #2 uses: text-shadow, box-shadow, text-overflow, @font-face and outline.

You can hover over or tap on the text-overflow to see the rest of the sentence.

@Font-face note: The .woff format is the only one that currently works on all modern browsers. The .eot, .ttf and .svg formats have scattered support or are no longer supported.

Since this is so far down page I did not include the autofocus attribute.

Email field: This will submit as long as there is an '@' and at least one character before AND after it (Not whitespace!). You have to use scripting for more proper email validation. On many mobile devices, tapping on this field will bring up a keyboard with the '@' included.

URL field: When the user inputs something into the field, this checks for http:// or https:// AND at least one character after (not whitespace). You have to use scripts for validation.

Telephone field: This merely brings up the numeric keypad app on a mobile phone.

Required field: The user must fill this field out (charcters and/or whitespaces). For fun, I have added a Validation button that will add the novalidate attribute to the form tag to suppress the required.

Search field: On mobile this will bring up the keyboard with a search button. On desktop, there will be a 'x' near the end of the field to clear the search term.

<Datalist>: Datalist is like <select> where it uses the <option> tag to feed it a list of predetermined values. However, the list will pop up when a user types into the field and will sort out the list as they type. Also, what makes this different is a user can submit their own value instead of what is on the list. In some browsers, a scrollable list will popup next to or under the field. Some browsers will temporarily save items the user submits that are not on the list.

Color picker: An OS or browser pop up will appear when you click on the color picker. Selecting a color returns the value as a HEX value. Color picker does not style very well without hacks, scripts or other creative methods.

File field: Just click on the "browse" button and select a file. I have added the accept="image/*" attribute to ma image files the default. However, is not meant for validation. Any file validation would have to be done through scripting. For now, you are limited on what styling you can use.

Number field: Click on the up/down arrow to choose a number or type a number in the box. You can also set a floor or ceiling using min and max. The numbers will increase or decrease by the number set in the step attribute. On mobile devices this will popup the numeric keypad or spinner. On desktop some browsers are more strict about what a user can input than others.

Month and Week: These are geared more towards mobile. On desktop, Firefox allows you to enter in whatever you want while Chrome, Edge and Opera are stricter. The value format varies depending on which browser/OS is used. On mobile, when you tap on these fields, date widgets will popup.

Time: This only allows numbers and either AM or PM. However, the format displayed in the field depends on the browser and/or OS. The value submitted is always the 24-hour clock.

Date/Date and Time: On mobile, tapping on the date field pops up a calendar widget. Tapping on the date and time field pops up both a calendar and a clock widget. Meanwhile on desktop, you can manually input the date and time or use a calendar widget that pops up when you click on the small calendar icon on the right side of the field. They are strict about what you can type into the fields.

<progress> and <output>: Simply put, you use <progress> for things such as measuring upload and download progress in bar form. You use <output> to output/show numerical results of calculations or, as in this example, show progress numerical form.

Range and <meter>: Range is displayed as a slider to input the min. and max. number within a certain range, for example, a volume control. <meter> is displays the amount of something measured. For example, the amount of space in a hard drive. There are examples of this being used for review ratings of media such as movies and games. Coloring <meter> requires browser-specific pseudo styling.

The example uses both the step attribute and <datalist> to limit the input of the slider.