martinandersen3d · December 18, 2019 16:56
diff --git a/inputmode.html b/inputmode.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HTML inputmode attribute</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      html {
        font-size: 20px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
        line-height: 1.7;
      }
      form {
        width: 90vw;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 3fr;
        grid-auto-rows: 3rem;
        column-gap: 1rem;
        align-items: center;
        /* outline: 1px solid red; */
      }
      label {
        font-size: 0.8rem;
        color: #364563; /* hsl(220deg, 30%, 30%) */
        padding: 0.25rem 0;
      }
      input {
        color: #1f3d7a; /* hsl(220deg, 60%, 30%) */
        font-size: 1rem;
        font-family: inherit;
        padding: 0.25rem 1rem;
        width: 100%;
        border: none;
        box-shadow: none;
        border-bottom: 1px solid #2952a3; /* hsl(220deg, 60%, 40%) */
      }
    </style>
  </head>
  <body>
    <form id="myForm" action="#">
      <label for="email">Email</label>
      <input type="email" id="email" inputmode="email" />

      <label for="phone">Mobile</label>
      <input type="tel" id="phone" inputmode="tel" />

      <label for="age">Age</label>
      <input type="number" id="age" inputmode="numeric" />

      <label for="search">Search</label>
      <input type="search" id="search" inputmode="search" />

      <label for="url">URL</label>
      <input type="url" id="url" inputmode="url" />

      <label for="none">None</label>
      <input type="text" id="none" inputmode="none" placeholder="default" />
    </form>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>HTML inputmode attribute</title>
	<style>
	* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	}
	html {
	font-size: 20px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	line-height: 1.7;
	}
	form {
	width: 90vw;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-auto-rows: 3rem;
	column-gap: 1rem;
	align-items: center;
	/* outline: 1px solid red; */
	}
	label {
	font-size: 0.8rem;
	color: #364563; /* hsl(220deg, 30%, 30%) */
	padding: 0.25rem 0;
	}
	input {
	color: #1f3d7a; /* hsl(220deg, 60%, 30%) */
	font-size: 1rem;
	font-family: inherit;
	padding: 0.25rem 1rem;
	width: 100%;
	border: none;
	box-shadow: none;
	border-bottom: 1px solid #2952a3; /* hsl(220deg, 60%, 40%) */
	}
	</style>
	</head>
	<body>
	<form id="myForm" action="#">
	<label for="email">Email</label>
	<input type="email" id="email" inputmode="email" />

	<label for="phone">Mobile</label>
	<input type="tel" id="phone" inputmode="tel" />

	<label for="age">Age</label>
	<input type="number" id="age" inputmode="numeric" />

	<label for="search">Search</label>
	<input type="search" id="search" inputmode="search" />

	<label for="url">URL</label>
	<input type="url" id="url" inputmode="url" />

	<label for="none">None</label>
	<input type="text" id="none" inputmode="none" placeholder="default" />
	</form>
	</body>
	</html>