Html Tips

Well its very often that we forget what we learn if leave it unpractice. So documenting the things which learn is always a good idea. Button All ways declare the button type. With the explosion

Well its very often that we forget what we learn if leave it unpractice. So documenting the things which learn is always a good idea.

Button

<button type="submit">

All ways declare the button type. With the explosion of dynamic web development understanding what the button does is getting complicated. So with decalring a button you can reduce some headache. By the there are 3 types of button types.

  • submit: Submits the current form data. (This is default.)
  • reset: Resets data in the current form.
  • button: Just a button. Its effects must be controlled by something else (that is, with JS or TS).

Difference between <button type="submit"> and <input type="submit">

Button can have content but whereas input cant (its a null element). Content could be a image, or text markup.

Hover, Active, Focus whats the difference

  • :hover: When a mouse pointer is on a element
  • :active: represents the state when the element is currently being activated by the user.
  • :focus: represents the state when the element is currently selected to receive input.

Lets take a button for example. When we move our mouse over a button we activate the hover event. On clicking the mouse active and focus will be activated while releasing the mouse will remove the active but focus will still be active. Lets see the example below

<button>
  When clicked, text turns red due to focus AND bold due to active<br />
  But not when focused, where my text just turns red
</button>

<style>
  button {    font-weight: normal;    color: black;  }

  button:focus {    color: red;  }

  button:active {    font-weight: bold;  }

  button:hover {    background-color: yellow;  }
</style>

One thought on “Html Tips

Leave a Reply

Your email address will not be published. Required fields are marked *