Janzz dl Janzz dl - 1 month ago 15
HTML Question

How to create placeholder with text

enter image description hereI want to create form like above attached image. Can add placeholder to text box. But when user press keys placeholders missing. I need to show placeholders above the text box when key press inside the text box.

Answer

You can use html required, autofocus and pattern attribute with RegExp ^[a-zA-Z]+(?:\s[a-zA-Z]+$|$) to match one or more a-z characters case insensitive at beginning of input, followed by space character, followed one or more a-z characters case insensitive by end of input, or end of input to handle two first names, for example "Billy Joe", "Norma Jean", "Sarah Jane"; <label> element adjacent to <input> element; css :invalid, :valid, :before; :after.

When input is :invalid set border to red, outline to none; set adjacent label element :before content of to "das", label :after content to !; at :valid:focus set label :before content to "First Name", label :after to UTF-8 "CHECK MARK"

@charset "UTF-8";
#input {
  height: 3.14em;
  left: 0px;
  outline: none;
  padding: 6px;
  margin: 4px;
  width: 150px;
}
#input:valid {
  border: 1px solid green;
  box-shadow: .015em .015em .015em green;
}
#input:invalid {
  border: 1px solid red;
  box-shadow: .015em .015em .015em red;
}
#input:invalid + [for="input"]:before {
  content: "das";
}
#input + [for="input"]:after {
  font-weight: bold;
  left: 160px;
  top: 12px;
  position: absolute;
}
#input:invalid + [for="input"]:after {
  content: "!";
  color: red;
}
#input:valid + [for="input"]:after {
  content: "\2713";
  color: green;
}
#input:valid + [for="input"]:before {
  content: "First Name";
  color: #ccc;
}
label[for="input"]:before {
  position: absolute;
  left: 12px;
  padding: 6px;
}
<meta charset="UTF-8" />
<input id="input" type="text" pattern="^[a-zA-Z]+(?:\s[a-zA-Z]+$|$)" required autofocus/>
<label for="input"></label>