Bad value X for attribute “type” on element “input”.

The type attribute on <input> only accepts the keywords defined in the HTML standard, so any other value, such as phone, social or the name of a website, is reported as an error.

type is an enumerated attribute. The valid keywords are text, search, email, url, tel, password, number, range, date, month, week, time, datetime-local, color, checkbox, radio, file, hidden, submit, reset, button and image. A browser that meets an unknown value treats the field as type="text", so the form still seems to work, but you lose the mobile keyboard, the built-in validation and the autofill hints that the right type gives you.

Pick the keyword that describes the data the field collects, not the topic of the field. A link to a profile page is a url, a phone number is tel, and an address you can send mail to is email. When no type fits, such as a username or a postal code, use type="text" and describe the value with autocomplete, inputmode or pattern. If you need a hook for scripts or styles, put it in name, id, class or a data-* attribute instead of type.

Invalid example

<form>
  <label for="profile">Social profile</label>
  <input type="social" id="profile" name="profile">

  <label for="phone">Phone</label>
  <input type="phone" id="phone" name="phone">
</form>

Valid example

<form>
  <label for="profile">Social profile</label>
  <input type="url" id="profile" name="profile" placeholder="https://example.com/yourname">

  <label for="phone">Phone</label>
  <input type="tel" id="phone" name="phone" autocomplete="tel">
</form>

Learn more:

MDN Reference

<input>: The HTML Input element - MDN Web Docs

→

MDN Reference

inputmode - MDN Web Docs

→