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
