کار با فرم ها 4

 

در این سری از آموزش های HTML ، که  جلسه ی پایانی کار با فرم ها نیز هست شما را با طریقه ایجاد لیست های داده، کادر های متنی چند خطی، سازمان دهی عناصر فرم و ایجاد نوار پیشرفت، و صفت و مقادیر آنها، آشنا خواهیم کرد.

ایجاد لیست های داده

یکی از امکانات جدید فراهم شده در HTML5 در رابطه با عناصر فرم امکان ایجاد لیست های داده است. لیست های داده بسیار شبیه comboboxها هستند با این فرق که، برخلاف combobox که امکان انتخاب یک گزینه از میان گزینه های از پیش تعریف شده را می دهد. در لیست های داده امکان وارد کردن گزینه مورد نظر کاربر که در میان گزینه های از پیش تعریف شده نیست وجود دارد. برای ایجاد یک datalist نیاز به یک کادر متنی و یک تگ <datalist> خواهیم ادشت. سپس کافی است نامی برای تگ <datalist> از طریق صفت id تعیین کرده و صفت جدید list را در تگ input مربوطه برابر آن قرار دهید. به کد زیر توجه کنید:

<input list="cars" />
<datalist id="cars">
    <option value="BMW">
    <option value="Ford">
    <option value="Volvo">
</datalist>

نتیجه در مرورگر فایرفاکس:

form datalist tag <a  style=آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه چهارم)" title="form-datalist-tag" width="165" height="58" />

ایجاد کادرهای متنی چند خطی

تگ <textarea> : از این تگ برای ایجاد نواحی متنی چند خطی استفاده می شود و صفت های زیر را می پذیرد:

  • rows : عددی صحیح را به عنوان مقدار می پذیرد و به همان تعداد سطر به ناحیه متنی ارتفاع می دهد.
  • cols : عددی صحیح را به عنوان مقدار می پذیرد و به همان تعداد کاراکتر به ناحیه متنی عرض می دهد.
  • readonly : در جلسه قبل توضیح داده شده است.
  • disabled : در جلسه قبل توضیح داده شده است.

کد زیر را در نظر بگیرید :

<textarea rows="4" cols="20">
At W3Schools you will find all the Web-building tutorials you need, from basic HTML to advanced XML, SQL, ASP, and PHP.
</textarea>

نتیجه در مرورگر :

form textarea tag <a  style=آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه چهارم)" title="form-textarea-tag" width="246" height="113" />

ایجاد انواع دکمه ها

تگ <button> : از این تگ برای ایجاد هر سه نوع دکمه ای که قبلا به آن اشاره شد می توان استفاده کرد. این تگ از صفت های زیر استفاده می کند.

name : نامی برای دکمه تعیین می کند
value : مقداری که برای صفحه پردازشگر ارسال می کند را مشخص می کند.
type :نوع دکمه ای که ایجاد می شود را مشخص می کند. و می تواند سه مقدار زیر را تعیین می کند

  • submit : یک دکمه از نوع submit برا ارسال فرم ایجاد می کند.
  • reset : یک دکمه از نوع reset به منظور پاک کردن عناصر فرم ایجاد می کند.
  • button : یک دکمه از نوع ساده که رفتار پیش فرضی از خود ندارد ایجاد می کند.

در این نوع دکمه متنی که داخل تگ باز و بسته button قرار می گیرد عنوان دکمه خواهد بود.

<button type="button"> Click Me! </button>

 

سازماندهی عناصر فرم

تگ <fieldset> : از این تگ برای نظم دهی و گروه بندی دیگر عناصر فرم استفاده می شود. این تگ فقط صفت های عمومی را دارد.

تگ <legend> : این تگ همیشه داخل تگ fieldset استفاده می شود و عنوان آن را مشخص می کتد. و از صفت های زیر استفاده می کند.

align : موقعیت عنوان را مشخص می کند. و یکی از مقادیر زیر را می پذیرد:

  • left : عنوان را در بالا سمت چپ قرار می دهد.
  • center : عنوان را در بالا وسط قرار می دهد.
  • right : عنوان را در بالا سمت راست قرار می دهد.

دستور زیر نحوه استفاده از تگ های fieldset و legend را نشان می دهد:

1 <fieldset>
2     <legend align="center"> Personal Information: </legend>
3     Name : <input type="text" size="30" />
4     <br />
5     Email : <input type="text" size="30" />
6     <br />
7     Date of Birth : <input type="text" size="10" />
8 </fieldset>

نتیجه در مرورگر :

form feildset tag <a  style=آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه چهارم)" title="form-feildset-tag" width="360" height="257" />

ایجاد نوارهای پیشرفت 

یکی از عناصر ارائه شده در html5 نوار پیشرفت (پردازش) است. از این عنصر معمولا برای نمایش روند پردازش عملیان (مخصوصا عملیات دانلود و آپلود) استفاده می شود. برای ایجاد این عنصر از تگی به نام <progress> استفاده می شود. این تگ از صفت های زیر استفاده می شود.

max : عددی صحیح را به عنوان مقدار نهایی عملیات می پذیرد (معمولا عدد 100 است )

value : عددی صحیح را به عنوان مقدار کنونی عملیات مشخص می کند..

1 The object's downloading progress :
2  <progress value="25" max="100"> </progress>

نتیجه کد در مرورگر:

form progress tag <a  style=آموزش HTML (قسمت 9) : کار با فرم ها در HTML (جلسه چهارم)" title="form-progress-tag" width="340" height="176" />

 

خب در این سری از آموزش ها تا به اینجا کار  با فرم ها به اتمام رسیده است، در بخش های بعد به کار با عناصر چند رسانه ای و طریقه افزودن موزیک و ویدیو به صفحه htmlمان را خواهیم پرداخت.

ارسال نظر