Skip to main content

Validating data on inputs with the pattern attribute

Less than 1 minuteCSSSnippetscssscsssasssnippetsvalidation

Validating data on inputs with the pattern attribute 관련

CSS > Snippets

Snippets

Validating data on inputs with the pattern attribute
<form>
  <input 
    type="text"
    placeholder="Has to contain 4 letters and no numbers"
    pattern="[A-Za-z]{4}"
  />
  <button>Send</button>
</form>

<form>
  <input 
    type="password"
    placeholder="Has to contain 6 letters or more"
    pattern=".{6,}"
  />
  <button>Send</button>
</form>


<form>
  <input 
    type="text"
    placeholder="Can only contain numbers"
    pattern="[0-9]+"
  />
  <button>Send</button>
</form>

<form>
  <input
    type="url"
    placeholder="Must start with https:// or http://"
    pattern="http:?://.+"
  />
  <button>Send</button>
</form>

이찬희 (MarkiiimarK)
Never Stop Learning.