Latest web development tutorials

مسج موبايل تشكيل المدخلات

مربع إدخال النص مسج موبايل

دخول هذا المجال من خلال HTML القياسية ترميز العناصر، سوف مسج موبايل إضافة أسلوبهم لجعلها تبدو أكثر جاذبية وأسهل للاستخدام على الأجهزة المحمولة. يمكنك أيضا استخدام جديد HTML5 <إدخال> النوع:

أمثلة

<form method="post" action="demo_form.php">
<div class="ui-field-contain">
<label for="fullname">全名:</label>
<input type="text" name="fullname" id="fullname">

<label for="bday">生日:</label>
<input type="date" name="bday" id="bday">

<label for="email">E-mail:</label>
<input type="email" name="email" id="email" placeholder="你的电子邮箱..">
</div>
</form>

محاولة »

نصيحة: استخدم نائبا لتحديد وصفا موجزا التي تصف القيمة المتوقعة من حقل الإدخال: 

<input placeholder="sometext">

الميدان النص

لخط متعددة قد تستخدم إدخال النص <textarea> من.

ملاحظة: عند كتابة بعض النصوص، حقول النص سيتم تغيير حجمها تلقائيا لتناسب الصف المضافة حديثا.

أمثلة

<form method="post" action="demo_form.php">
<div class="ui-field-contain">
<label for="info">附加信息:</label>
<textarea name="addinfo" id="info"></textarea>
</div>
</form>

محاولة »

مربع الإدخال البحث

اكتب = "بحث" نوع من مربع الإدخال الجديد في HTML5، الذي يعرف بأنه أحد حقول البحث إدخال النص:

أمثلة

<form method="post" action="demo_form.php">
<div class="ui-field-contain">
<label for="search">搜索:</label>
<input type="search" name="search" id="search">
</div>
</form>

محاولة »

زر الراديو

عندما يقوم المستخدمون اختيار عدد محدود من حدد خيار واحد فقط عند استخدام أزرار الراديو.

من أجل إنشاء سلسلة من أزرار الراديو، إضافة المدخلات والتسمية المقابلة مع نوع = "الراديو" هو. زر الاختيار المغلقة داخل العنصر <مجموعة حقول>. يمكنك أيضا إضافة عنوان <أسطورة> عنصر لتحديد <مجموعة حقول>.

نصيحة: استخدم-دور البيانات = "controlgroup" الزر لوضع معا:

أمثلة

<form method="post" action="demo_form.php">
<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>

محاولة »

مربع

عندما يقوم المستخدم بتحديد خيار واحد أو أكثر في عدد محدود من الخيارات، خانات الاختيار استخدام:

أمثلة

<form method="post" action="demo_form.php">
<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>

محاولة »

أمثلة

مزيد من الأمثلة

لمجموعة من أزرار الراديو أفقية أو خانات الاختيار استخدام البيانات من نوع = "الأفقي":

أمثلة

<fieldset data-role="controlgroup" data-type="horizontal">

محاولة »

يمكنك أيضا استخدام حقل حاوية محاطة <مجموعة حقول>:

أمثلة

<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>请选择您的性别:</legend>
</fieldset>
</div>

محاولة »

إذا كنت تريد الزر الخاص بك في السمات المحددة مسبقا، استخدام HTML <الإدخال> تم سحبه:

أمثلة

<input type="radio" checked>
<input type="checkbox" checked>

محاولة »

يمكنك البوب ​​في على شكل:

أمثلة

<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline"> مشاهدة نموذج المنبثقة </A>

<div-دور البيانات = "المنبثقة" معرف = "myPopup" الطبقة = "واجهة المستخدم المحتوى">
<طريقة نموذج = "وظيفة" العمل = "demoform.php">
<div>
<H3> معلومات الدخول </ H3>
<تسمية ل= الطبقة "usrnm" = "مخبأة الوصول إليها واجهة المستخدم"> اسم المستخدم: </ التسمية>
<إدخال نوع = "نص" اسم = "المستخدم" معرف = "usrnm" نائبا = "اسم المستخدم">
<تسمية ل= الطبقة "PSWD" = "مخبأة الوصول إليها واجهة المستخدم"> كلمة السر: </ التسمية>
<إدخال نوع = "كلمة السر" اسم = "passw" معرف = "PSWD" نائبا = "كلمة المرور">
</ div>
</ النموذج>
</ div>

محاولة »