w3resource

HTML5 - Basic Exercises, Practice, Solution

[An editor is available at the bottom of the page to write and execute the scripts.]

46. How to define an input control?

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Input</title>
</head>
<body>

</body>
</html>

Try it in the following editor or see the solution.

I. How to specify the types of files that the server accepts(only for type="file")?

II. How to specify an alternate text for images?

III. How to specify whether an input element should have autocomplete disabled?

IV. How to specify that an input element should automatically get focus when the page loads?

V. How to specify that an input element should be pre-selected when the page loads (for type="checkbox" or type="radio")?

VI. How to specify that an input element should be disabled?

VII. How tie an input element to a form, though the input element resides outside the form?

VIII. How to specify the URL that will process the data supplied through input(s) when the form is submitted (for type="submit" and type="image")?

IX. How to specify the form-data should be encoded when submitting it to the server (for type="submit" and type="image")?

X. How to define the HTTP method for sending data to the action URL (for type="submit" and type="image")?

XI. How to define that form elements should not be validated when submitted?

XII. How to specify where to display the response that is received after submitting the form (for type="submit" and type="image")?

XIII. How to specify the height of an input element (only for type="image")?

XIV. How to refer to a datalist element that contains pre-defined options for an input element?

XV. How to specify the maximum value for an input element?

XVI. How to specify the maximum number of characters allowed in an input element?

XVII. How to specify a minimum value for an input element?

XVIII. How to specify that a user can enter more than one value in an input element?

XIX. How to specify the name of an input element?

XX. How to specify a regular expression that an input element's value is checked against?

XXI. How to specify a short hint that describes the expected value of an input element?

XXII. How to specify that an input field is read-only?

XXIII. How to specify that an input field must be filled out before submitting the form?

XXIV. How to specify the width, in characters, of an input element?

XXV. How to specify the URL of the image used as a submit button (only for type="image")?

XXVI. How to specify the legal number intervals for an input field?

XXVII. How to specify the type of an input element ?

XXVIII. How to specify the value of an input element?

XXIX. How to specify the width of an input element (only for type="image")?

See the Pen html css common editor by w3resource (@w3resource) on CodePen.


Previous: How to define an image?
Next: How to define a text that has been inserted into a document?

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.

HTML-CSS: Tips of the Day

Expand a div to fill the remaining width

The solution to this is actually very easy, but not at all obvious. You have to trigger something called a "block formatting context" (BFC), which interacts with floats in a specific way.

Just take that second div, remove the float, and give it overflow:hidden instead. Any overflow value other than visible makes the block it's set on become a BFC. BFCs don't allow descendant floats to escape them, nor do they allow sibling/ancestor floats to intrude into them. The net effect here is that the floated div will do its thing, then the second div will be an ordinary block, taking up all available width except that occupied by the float.

This should work across all current browsers, though you may have to trigger hasLayout in IE6 and 7. I can't recall.

Demos:

  • Fixed Left: http://jsfiddle.net/A8zLY/5/
  • Fixed Right: http://jsfiddle.net/A8zLY/2/
div {
  float: left;
}

.second {
  background: #ccc;
  float: none;
  overflow: hidden;
} 
<div>Tree</div>
<div class="second">View</div>