HTML Оролтын төрлүүд /Input Type/
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 Button
<button> элементэд товших товчлуурыг тодорхойлно.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<h2>Button элемент</h2>
<button type="button" onclick="alert('Сайн уу HTML!')">Энд дар!</button>
</body>
</html>
Дээрх жишээ нь дараах байдалтай дэлгэцэд харагдана
HTML Текст талбар /Text Fields/
HTML <input type="text"> нь нэг мөр текст оруулах талбарыг тодорхойлно. Текст оруулах талбарын анхдагч өргөн нь 20-н тэмдэгтийн урттай байдаг.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<form>
<label for="ovog">Эцгийн нэр:</label><br>
<input type="text" id="ovog" name="ovog" value="Дорж"><br>
<label for="ner">Нэр:</label><br>
<input type="text" id="ner" name="ner" value="Болд"><br><br>
</form>
</body>
</html>
Нууц үг /Input type password/
<input type="password"> нь нууц үгийн талбарыг тодорхойлдог
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<form>
<label for="ovog">Нэр:</label><br>
<input type="text" id="ovog" name="ovog"><br>
<label for="ner">Нууц үг:</label><br>
<input type="password" id="nuutsug" name="nuutsug"><br><br>
<input type="submit" value="submit">
</form>
</body>
</html>
HTML Input Type Submit
HTML-д submit button-г <input type="submit"> гэж тодорхойлдог бөгөөд form-н өгөгдлийг data form-handler буюу боловсруулагчид илгээдэг.
form-handler гэдэг нь сервер дээр байрласан датаг боловсруулах хуудас юм.
form-handler буюу боловсруулагч хуудсыг form элементийн action атрибутад зааж өгнө.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<h2>HTML form submit<h2>
<form action="http://www.abcd.mn/static/html/forms/submit.py" target="blank">
<label for="ovog">Эцгийн нэр:</label><br>
<input type="text" id="ovog" name="ovog" value="Дорж"><br>
<label for="ner">Нэр:</label><br>
<input type="text" id="ner" name="ner" value="Болд"><br><br>
<input type="submit" value="Submit">
</form></body>
</html>
Дээрх жишээ нь дэлгэцэд доорх байдалтай харагдана
Action атрибут
submit товчийг дархад form буюу маягтын гүйцэтгэх үйлдлийг action атрибутад тодорхойлдог.
Ихэвчлэн form буюу маягтад бөглөсөн датаг серверийн боловсруулах хуудсанд илгээхэд ашигладаг.
дээрх жишээнд бид form буюу маягтын датаг cерверт байрлах "submit.py" python хуудсанд илгээсэн. Ингэснээр бид сервер талын скриптэд form-н дата өгөгдлийг агуулж байна.
Жишээ нь
<form action="/submit.py">
Хэрэв action атрибутыг орхигдуулсан бол submit үйлдэл нь тухайн хуудсан хийгдэх болно.
HTML Input Type Reset
Хэрэв та оролтын утгыг өөрчлөөд "Reset" буюу дахин тохируулах товчийг дарвал form буюу маягтын өгөгдөлийн анхдагч утгуудыг дуудна.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<h2>Input Type Reset</h2>
<form action="http://www.abcd.mn/static/html/forms/submit.py" target="blank">
<label for="ovog">Эцгийн нэр:</label><br>
<input type="text" id="ovog" name="ovog" value="Дорж"><br>
<label for="ner">Нэр:</label><br>
<input type="text" id="ner" name="ner" value="Болд"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
</body>
</html>
Дээрх жишээ нь дэлгэцэд доорх байдалтай харагдана
HTML Radio Buttons
HTML-д <input type="radio">-д radio button-г тодорхойлдог.
Radio Buttons нь тодорхой хэдэн сонголт дундаас нэгийг сонгох боломж өгдөг.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<h1>Radio Button, Нэгийг сонгоно</h1>
<form>
<input type="radio" id="apple" name="gender" value="male">
<label for="apple">Алим</label><br>
<input type="radio" id="banana" name="gender" value="female">
<label for="banana">Банана</label><br>
<input type="radio" id="pineapple" name="gender" value="other">
<label for="pineapple">Хан боргоцой</label>
</form>
</body>
</html>
Дээрх жишээ нь дараах байдалтай дэлгэцэд харагдана
Input Type Checkbox
HTML-д <input type="checkbox">-д олон сонголт хийх checkbox-г тодорхойлдог.
checkbox нь хэрэглэгчид хязгаарлагдмал тооны сонголтоос 0 болон түүнээс олон утга сонгох боломж олгодог.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<h1>Checkbox, олон сонголт сонгох болможтой</h1>
<form>
<input type="checkbox" id="apple" name="gender" value="male">
<label for="apple">Алим</label><br>
<input type="checkbox" id="banana" name="gender" value="female">
<label for="banana">Банана</label><br>
<input type="checkbox" id="pineapple" name="gender" value="other">
<label for="pineapple">Хан боргоцой</label>
</form>
</body>
</html>
Дээрх жишээ нь дараах байдалтай дэлгэцэд харагдана
Өнгө /Input type Color/
<input type="color"> нь өнгө агуулсан оролтын талбарыг тодорхойлдог.
Интернет хөтчийн тусламжтайгаар өнгө сонгох цонх гарч ирнэ.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<form>
<label for="favcolor">Дуртай өнгө сонгох:</label>
<input type="color" id="ungu" name="ungu" value="#00ff00">
<input type="submit" value="Submit">
</form>
</body>
</html>
Огноо /Input type Date/
<input type="date"> нь огноо агуулсан оролтын талбарыг тодорхойлдог.
Интернет хөтчийн дэмжлэгээс хамаарч огноо сонгогч нь огноо оруулагч талбарт гарч ирнэ.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<form>
<label for="birthday">Төрсөн өдөр:</label>
<input type="date" id="birthday" name="birthday">
<input type="submit" value="Submit">
</form>
</body>
</html>
Огноонд хязгаарлалт нэмэхийн тулд <max> болон <min> шинж чанаруудыг ашиглана.
Жишээ нь
<form>
<label for="max">1961-01-01-с өмнөх огноог оруулна уу</label>
<input type="date" id="max" name="max" max="1960-12-31"><br><br>
<label for="min">2010-01-01-с хойшох огноог оруулна уу</label>
<input type="date" id="min" name="min" min="2010-01-01">
</form>
И-Майл /Input type Email/
<input type="email"> нь и-майл агуулсан оролтын талбарыг тодорхойлдог.
Интернет хөтөчийн дэмжлэгээс хамаарч майл илгээгдсэн үед имэйл хаягийг автоматаар баталгаажуулах боломжтой юм.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>
Файл /Input type File/
<input type="file"> нь файл байршуулах "browse" товчийг тодорхойлдог.
Жишээ нь
<!DOCTYPE html lang="en-US">
<html>
<body>
<form>
<label for="file">Файл сонгох:</label>
<input type="file" id="file" name="file"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Сэтгэгдэлүүд
