URL control w/ Name & Desc

Accessible name comes from label. Description comes from the paragraph associated via aria-describedby.

by David Storey

HTML

<form>
  <label for="url">Link to avatar:</label> 
  <input type="url" id="url" aria-describedby="url-desc" required /> 
  <p id="url-desc">Include the protocol (http:// or https://) with the URL. The image format must be either PNG, JPEG, or SVG. Maximum dimensions are 800Ă—800 pixels.</p>
</form>

CSS

* {
  margin: 0;
  padding: 0;
}

html {
  font: 62.5% "segoe ui", helvetica, arial, sans-serif;
  background-color: #eee;
  margin: 2rem;
}

body, input {
  font-size: 2.6rem;
}

p { 
  font-size: 1.6rem;
}

input {
  display: block;
  width: 80%;
  margin: 1.6rem 0;
  border: 2px solid #555;
  padding: .8rem 1.2rem;
}

input:focus {
  outline: 2px solid cornflowerblue;
}