HTML Input Tag

Giriş
Açıklaması şöyle.

The <input> element is one of the most interesting HTML elements we have access to. Depending on the attributes it can be a text field, a range slider, a file selector a button and many more.

< Karakterinden Sonra Boşluk Olamaz
Açıklaması şöyle.

No, you cannot have a space immediately after the < (less-than sign) in an HTML element's opening start tag.

autocomplete Attribute
Açıklaması şöyle.

There are many autocomplete values available, covering everything from names and addresses to credit cards and other account details. For sign up and login there are a few autocomplete values that stand out as useful hints: username, email, new-password, current-password.

Örnek
Şöyle yaparız

<input autocomplete="on" name="inputName">

class Attribute
Eğer bu alana btn değeri atanırsa düğme gibi görünür.

Örnek
Elimizde şöyle bir css olsun

.disabled {
  background: #ccc;
  cursor: not-allowed;
  border-width: 1px;
}

Şöyle yaparız.

<input type="text" readonly="readonly" class="disabled" />
<input type="password" readonly="readonly" class="disabled" />

disabled Attribute
Şöyle yaparız.

input type="text" value="{{user.name}}" readonly>
// In this case you can get post values  

<input type="text" value="{{user.name}}" disabled>
// In this case you can not get post values  

inputmode Attribute
Açıklaması şöyle.

The inputmode attribute changes the keyboard the browser should display without changing the meaning of the data the field collects. We want our <input> to receive text input, but from the numeric keyboard. So instead, add inputmode="numeric"

<input type="text" name="token" id="token" inputmode="numeric" />

inputmode has a number of other values, including "tel" for telephone numbers, "email", "decimal", "url", "search" and "none" in case you want to render your own keyboard.... 

Browser support for inputmode is good for mobile operating systems these days, but a couple of years ago it was in the wilderness. For older browsers there is another trick to trigger the numeric keyboard and include a bit of extra validation for free.

onChange Attribute
Şöyle yaparız.

render() {
  return (
    <div>
      <input type="text" name="word" value={this.state.field}
             onChange={this.handleChangeField} />
      {this.state.field}
    </div>
  );
}

pattern Attribute
Açıklaması şöyle.

The pattern attribute allows you to validate the contents of an <input> using a regular expression. Using the pattern [0-9]* tells the browser that we only accept numbers in the field and also triggers the number pad in browsers without inputmode support.

readOnly Attribute
readonly değerini alabilir. Şöyle yaparız.

<input type="text" readonly="readonly" disabled value="{user.name}}">

type Attribute
checkbox,hidden,text, time değerlerini alabilir.
checkbox Tipi
Örnek
Checkbox için şöyle yaparız.

<input id="more" type="checkbox" /> <label for="more">more</label>

date Tipi
Örnek
Şöyle yaparız.

<input type="date" id="tgt">

Değere erişmek için şöyle yaparız.

document.getElementById('tgt').addEventListener('change', function() {
    console.log(Object.prototype.toString.call(this.valueAsDate));
});

veya şöyle yaparız.

let strValue = document.getElementById("myDate").value; 
let dateValue = new Date(strValue);

file Tipi
Örnek
Şöyle yaparız

<form onSubmit="check(event)">
  <input id="name" class="btn" type="file" name="pic" multiple>
  <button class="btn btn-primary" type="submit" id="submit" name="submit">UPLOAD</button>
</form>

hidden Tipi
Örnek
Gizli alan için şöyle yaparız.

<input type="hidden" id="thisField" name="inputName" value="hiddenValue">

Servlet içinde bu alana erişmek için şöyle yaparız.

String hidden = request.getParameter("inputName");

password Tipi
Örnek
Elimizde şöyle bir kod olsun.

validateNumber(event) {
  const keyCode = event.keyCode;

  const excludedKeys = [8, 37, 39, 46];

  if (!((keyCode >= 48 && keyCode <= 57) ||
    (keyCode >= 96 && keyCode <= 105) ||
    (excludedKeys.includes(keyCode)))) {
      event.preventDefault();
  }
}

Şifre için şöyle yaparız.

<input type="password" placeholder="Enter Mobile no" formControlName="mobile_no"
  (keydown)="validateNumber($event)">

Örnek
Şifre için şöyle yaparız.

<form action="javascript: alert('alright');">
<div>
  <input type="password" 
         pattern="^[0-9]{10}$"
         inputmode="numeric"
         minlength="10" maxlength="10"
         placeholder="Enter Mobile no"
         required title="Ten digits required.">
  <input type="submit">
</div>
</form>

text Tipi
Örnek
Metin girdi için şöyle yaparız.

<input type="text" name="email" placeholder="Your Email" id="userInput"><br>

time Tipi
Örnek
Saat için şöyle yaparız.

<input type=time value=00:00 autofocus>

value Attribute
Girdi kutusundaki değere erişmek için kullanılır.
Örnek
Elimizde şöyle bir kod olsun.

<input id="letters" type="text" name="entry">

Girilen değere erişmek için şöyle yaparız.

var tileLetters = document.getElementById("letters").value;  //value instead of text