در این جلسه در طراحی سایت که آخرین جلسه ی کار با فرم ھا نیز ھست شما را با طریقه ایجاد لیست ھای داده، کادر ھای متنی چند خطی، سازمان دھی عناصر فرم و ایجاد نوار پیشرفت، و صفت و مقادیر آنھا، آشنا خواھیم کرد.
ایجاد لیست های داده
یکی از امکانات جدید فراھم شده در 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>
ایجاد کادرهای متنی چند خطی
تگ <textarea>: از این تگ برای ایجاد نواحی متنی چند خطی استفاده می شود و صفت ھای زیر را می پذیرد:
rows:عددی صحیح را به عنوان مقدار می پذیرد و به ھمان تعداد سطر به ناحیه متنی ارتفاع می دھد.
cols:عددی صحیح را به عنوان مقدار می پذیرد و به ھمان تعداد کاراکتر به ناحیه متنی عرض می دھد.
کد زیر را در نظر بگیرید :
<textarea rows="4" cols="20">
At W3Schools you will find all the Web-building tutorials you need, from basic HTML to adv
anced XML, SQL, ASP, and PHP.
</textarea>
ایجاد انواع دکمه
تگ <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را نشان می دھد:
<fieldset>
<legend align="center"> Personal Information: </legend>
Name : <input type="text" size="30" />
<br />
Email : <input type="text" size="30" />
<br />
Date of Birth : <input type="text" size="10" />
</fieldset>
ایجاد نوارهای پیشرفت
یکی از عناصر ارائه شده در html5نوار پیشرفت )پردازش( است. از این عنصر معمولا برای نمایش روند پردازش عملیات(مخصوصا عملیات دانلود و آپلود) استفاده می شود. برای ایجاد این عنصر از تگی به نام > <progressاستفاده میشود. این تگ از صفت ھای زیر استفاده می شود.
max:عددی صحیح را به عنوان مقدار نھایی عملیات می پذیرد (معمولا عدد ۱۰۰است)
value:عددی صحیح را به عنوان مقدار کنونی عملیات مشخص می کند..
The object's downloading progress :
<progress value="25" max="100"> </progress>
بسیار خب تا به اینجا کار ما با فرم ھا به اتمام رسید، در قسمت دھم به کار با عناصر چند رسانه ای و طریقه افزودن موزیک و ویدیو به صفحه htmlمان را خواھیم آموخت
طراحی سایت اسپیناس همیشه سعی در استفاده از به روز ترین تکتینک ها و ابزارها در طراحی سایت دارد در اسپیناس از تکنولوژی ها روز دنیا مانند CSS3 , HTML5 , Jquery , JAVASCRIPT در طراحی وب سایت استفاده می شود و همچنین زبانهایی مانند PHP , ASP در شرکت اسپیناس مشتری مداری حرف اول را می زند
