- HTML оролтын төрлүүд(input types)
- Текст оруулах төрөл
- Нууц үг оруулах төрөл
- Input Type Submit
- Дахин тохируулах оролтын төрөл
- Input Type Radio
- Input Type Checkbox
- Оролтын төрөл товчлуур
- Оролтын төрөл Өнгө
- Оролтын төрөл Өгөгдөл
- Оролтын төрөл Цаг-Дотоодын
- Оролтын төрөл Имайл
- Оролтын төрөл файл
- Оролтын төрөл Нуугдсан
- Оролтын төрөл Он сар
- Оролтын төрөл Дугаар
- Input Restrictions
- Оролтын төрөл Хайх
- Оролтын төрөл Утас
- Оролтын төрөл Цаг
- Оролтын төрөл Url
- Оролтын төрөл 7 хоног
- HTML Оролтын төрөлийн шинж чанар
Энэ бүлэгт HTML
<input>
элементийн янз бүрийн төрлийг тайлбарласан болно.
HTML оролтын төрлүүд(input types) #
HTML дээр ашиглаж болох оролтын төрлүүд энд байна.
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
Текст оруулах төрөл #
<input type="text">
нэг мөрт текст оруулах талбарыг тодорхойлно:
Жишээ #
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Дээрх HTML кодыг хөтөч дээр ингэж харуулах болно:
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
This is how the HTML code above will be displayed in a browser:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="оруулах">
</form>
Дээрх HTML кодыг хөтөч дээр ингэж харагдах болно:
Хэрэв та илгээх товчлуурын утгын шинж чанарыг орхигдуулсан бол товчлуур нь үндсэн текстийг авах болно:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
Дээрх HTML кодыг хөтөч дээр ингэж харагдах болно:
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>
Дээрх HTML кодыг хөтөч дээр ингэж харуулах болно:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Дээрх HTML кодыг хөтөч дээр ингэж харуулах болно:
<input type="button" onclick="alert('Сайн байна уу!')" value="Над дээр дар!">
Дээрх HTML кодыг хөтөч дээр ингэж харуулах болно:
<form>
<label for="favcolor">Дуртай өнгөө сонгоорой:</label>
<input type="color" id="favcolor" name="favcolor">
</form
Дээрх HTML кодыг хөтөч дээр ингэж харуулах болно:
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
Та min
болон max
шинж чанаруудыг ашиглан огноонд хязгаарлалт нэмж болно.
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
Input Restrictions #
Here is a list of some common input restrictions:
Attribute | Description |
---|---|
checked | Хуудсыг ачаалах үед оролтын талбарыг урьдчилан сонгох ёстойг зааж өгсөн (type = “checkbox” эсвэл type = “radio” хувьд) |
disabled | Оролтын талбарыг идэвхгүй болгохыг зааж өгнө |
max | Оролтын талбайн хамгийн их утгыг тодорхойлно |
maxlength | Оролтын талбарын тэмдэгтийн хамгийн их тоог заана |
min | Оролтын талбайн хамгийн бага утгыг тодорхойлно |
pattern | Оролтын утгыг шалгахын тулд тогтмол илэрхийлэлийг зааж өгдөг |
readonly | Оролтын талбарыг зөвхөн уншихыг зааж өгдөг (өөрчлөх боломжгүй) |
required | Specifies that an input field is required (must be filled out) |
size | Specifies the width (in characters) of an input field |
step | Оруулах талбайн хууль ёсны тооны интервалыг тодорхойлно |
value | Оролтын талбарын үндсэн утгыг заана |
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
HTML Оролтын төрөлийн шинж чанар #
Tag | Description |
---|---|
<input type=””> | Харуулах оролтын төрлийг тодорхойлно |