جی کوئری موبایل-ورودی های فرم
ورودی های متن در جی کوئری موبایل
فیلدهای ورودی به وسیله ی عناصر استاندارد HTML ایجاد می شوند و جی کوئری موبایل سعی بر این دارد که آنها را برای دستگاه های موبایل جذاب و راحت کند. شما همچنین می توانید از انواع عناصر <input> از HTML5 استفاده کنید:
مثال
<div class="ui-field-contain">
<label for="fullname">Full name:</label>
<input type="text" name="fullname" id="fullname">
<label for="bday">Date of Birth:</label>
<input type="date" name="bday" id="bday">
<label for="email">E-mail:</label>
<input type="email" name="email" id="email" placeholder="Your email..">
</div>
</form>
Text area
برای ورودی هایی که نیاز به چندین خط دارند، از عنصر <textarea> استفاده کنید.
نکته: عناصر text area هنگامی که شما متنی را اضافه می کنید، به اندازه ی آن متن در می آیند.
مثال
<textarea name="addinfo" id="info"></textarea>
ورودی search
عنصر ورودی از نوع "type="search در HTML5 جدید می باشد و درواقع یک فیلد متنی است که از آن برای جستجو استفاده می شود:
مثال
<input type="search" name="search" id="search">
دکمه های رادیویی
از دکمه های رادیویی هنگامی استفاده می شود که کاربر بخواهد از میان چند گزینه، تنها یکی را انتخاب کند.
برای ایجاد یک مجموعه از دکمه های رادیویی، یک عنصر input با ویژگی "type="radio اضافه کنید و یک برچسب مناسب هم اضافه کنید. حالا دکمه های رادیویی را درون یک عنصر <fieldset> قرار دهید. شما همچنین می توانید از یک عنصر <legend> برای ایجاد عنوان برای <fieldset> استفاده کنید.
نکته: برای گروه بندی کردن دکمه ها، از "data-role="controlgroup استفاده کنید:
مثال
<fieldset data-role="controlgroup">
<legend>Choose your gender:</legend>
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male">
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female">
</fieldset>
</form>
چک باکس ها
از چک باکس ها زمانی استفاده می شود که کاربر بخواهد از یک سری گزینه ای محدود، یک یا چند گزینه را انتخاب کند:
مثال
<fieldset data-role="controlgroup">
<legend>Choose as many favorite colors as you'd like:</legend>
<label for="red">Red</label>
<input type="checkbox" name="favcolor" id="red" value="red">
<label for="green">Green</label>
<input type="checkbox" name="favcolor" id="green" value="green">
<label for="blue">Blue</label>
<input type="checkbox" name="favcolor" id="blue" value="blue">
</fieldset>
</form>
مثال های بیشتر
برای گروه بندی کردن دکمه های رادیویی و یا چک باکس ها به صورت افقی، از "data-type="horizontal استفاده کنید:
شما همچنین می توانید به دور عنصر <fieldset> یک ظرف(container) قرار دهید:
مثال
<fieldset data-role="controlgroup">
<legend>Choose your gender:</legend>
</fieldset>
</div>
اگر می خواهید که یکی از دکمه های شما از پیش، انتخاب شده باشد از خصوصیت checked استفاده کنید:
شما همچنین می توانید فرم خود را درون یک پاپ آپ قرار دهید:
مثال
<div data-role="popup" id="myPopup" class="ui-content">
<form method="post" action="demoform.asp">
<div>
<h3>Login information</h3>
<label for="usrnm" class="ui-hidden-accessible">Username:</label>
<input type="text" name="user" id="usrnm" placeholder="Username">
<label for="pswd" class="ui-hidden-accessible">Password:</label>
<input type="password" name="passw" id="pswd" placeholder="Password">
</div>
</form>
</div>
- نوشته شده توسط احسان عباسی
- بازدید: 4716
