img
img
img
img
shape
shape
پنجشنبه ۱ دی

برنامه نویسی

Visits Count ۶۷۵

آموزش برنامه نویسی طراحی سایت جلسه دوم تگ های html


۱

لینک دانلود فیلم
چند دقیقه اول ویدیو صوت ندارد.
یکی دیگر از گونه های تگ input انتخاب فایل است. از این حالت برای وقتی می توان استفاده کرد که از کاربر بخواهیم فایل یا تصویری را برای آپلود انتخاب کند.

<input type="file" />

تگ دیگری که بسیار پر کاربرد است label است. این تگ برای اتصال به تگ های input استفاده می شود. به این صورت که می توانید در مورد تگ های input توضیحی به کاربر بدهید. و یا در مورد تگ های انتخابی امکان کلیک بر روی آن ها را ساده تر کنیم.

<label>لطفا تصویر خود را بارگذاری کنید.</label>
 <input type="file" />


نکته مهم دیگری که بسیار کاربرد دارد کامنت ها هستند. کامنت ها وقتی به کار می روند که می خواهید به صورت موقت قطعه ای از کد را غیر فعال کنید ولی آن را حذف نکنید. یا برای مثال توضیحی در کد قرار بدهید.
در کل هر چیزی که در داخل تگ کامنت قرار بگیرد به کاربر نمایش داده نخواهد شد.

<!— this line is comment —>

تگ دیگر برای انتخاب از بین گزینه های مختلف است. برای مثال انتخاب استان یا شهر را در نظر بگیرید. برای این کار از تگ select استفاده می کنیم.

<label>استان محل سکونت خود را انتخاب کنید</label>
<select>
	<option>تهران</option>
	<option>مرکزی</option>
	<option>البرز</option>
</select>

تگ دیگری که مانند تگ select می باشد و امکان انتخاب به کاربر را می دهد نوع radio از تگ input است.
فرض کنید می خواهید کاربر جنسیت خود را انتخاب کند.

<label>آقا</label>
<input type="radio" />
<label>خانم</label>
<input type="radio" />




برای اینکه این دو انتخاب را در یک دسته قرار دهید تا با انتخاب یکی دیگری غیر فعال شود باید مقدار name هر دو را معادل یک مقدار قرار دهید. مهم نیست این کلمه چه باشد. تنها چیزی که مهم است مساوی بودن آن ها در هر دو تگ است.

<label>آقا</label>
<input type="radio" name="gender" />
<label>خانم</label>
<input type="radio" name="gender" />




ویژگی name بعد ها نیز در ذخیره داده ها کاربرد خواهد داشت. حالا با انتخاب یک جنسیت دیگری غیر فعال می شود.
برای اینکه با کلیک بر روی تگ های label کنار هر دایره آن radio انتخاب شود، نیاز است که تگ input و label را به یکدیگر متصل کنیم.
برای این کار به تگ input یک ویژگی جدید به اسم id اضافه می کنیم. همچنین ویژگی for را به تگ label اضافه می کنیم. مقدار هر دوی این ویژگی های جدید باید یکسان باشد تا مرور گر بداند که این دو تگ با یکدیگر اتصال دارند.

<label for="male">آقا</label>
<input  id="male" type="radio" name="gender" />
<label  for="female">خانم</label>
<input  id="female" type="radio" name="gender" />




تگ radio برای انتخاب هایی است که کاربر باید از بین چند گزینه فقط یکی را انتخاب کند. اما اگر نیاز داشتید تا چند گزینه را بتوان انتخاب کرد از حالت checkbox در تگ input استفاده می کنیم.

<label for="male">آقا</label>
<input  id="male" type="checkbox" />
<label  for="female">خانم</label>
<input  id="female" type="checkbox" />

یکی دیگر از ویژگی های تگ input ویژگی placeholder است. از این ویژگی برای دادن راهنمایی به کاربر استفاده می کنیم که چگونه داده ای مورد تایید ما می باشد.

<input type="text" placeholder="hint" />

مقدار این ویژگی به صورت کمرنگ در داخل فیلد نمایش داده می شود و با آغاز تایپ کاربر این مقدار حذف می شود.
یک سری از ویژگی ها مقدار ندارند.فقط حضور آن ها باعث اعمال شدن ویژگی خاص می شود. مانند ویژگی checked در تگ input.
با این کار این گزینه به صورت پیش فرض انتخاب خواهد شد.

<label for="male">آقا</label>
<input  id="male" type="radio" name="gender" checked />
<label  for="female">خانم</label>
<input  id="female" type="radio" name="gender" />




<label for="male">آقا</label>
<input  id="male" type="checkbox" checked/>
<label  for="female">خانم</label>
<input  id="female" type="checkbox" />




اگر همین خاصیت را در تگ select بخواهیم باید از ویژگی selected استفاده می کنیم.

<label>استان محل سکونت خود را انتخاب کنید</label>
<select>
	<option selected>تهران</option>
	<option>مرکزی</option>
	<option>البرز</option>
</select>

بعضی مواقع می خواهیم کاربر بتواند چند گزینه را از بین گزینه های select انتخاب کند. برای این کار باید ویژگی multiple را به تگ select اضافه کنیم.

<label>استان محل سکونت خود را انتخاب کنید</label>
<select multiple>
	<option >تهران</option>
	<option>مرکزی</option>
	<option>البرز</option>
</select>

حال اگر بخواهیم مقدار پیش فرض را در تگ input از نوع نوشته داشته باشیم باید از ویژگی value استفاده کنیم. با این کار مقدار پیش فرض در فیلد جایگذاری خواهد شد.

<input type="text" value="default text" />

نوع دیگری از تگ input وجود دارد که مختص ورود عدد است. در این فیلد نمی توان نوشته وارد کرد. و برای زمانی مناسب است که کاربر باید حتما عدد وارد کند.

<input type="number"  />

برای ایجاد جدول می توانیم از تگ table استفاده کنیم.
برای این کار از سه تگ table به عنوان والد tr برای سطر ها و td برای ستون ها استفاده خواهیم کرد.

<table>
    <tr>
        <td>نام</td>
        <td>نام خانوادگی</td>
        <td>تلفن</td>
    </tr>
    <tr>
        <td>علی</td>
        <td>کاظمی</td>
        <td>۰۹۱۲۰۰۰</td>
    </tr>
</table>
نام نام خانوادگی تلفن
علی کاظمی ۰۹۱۲۰۰۰

اگر بخواهیم لیستی از موارد را به حفظ ترتیب نمایش دهیم می توانیم از تگ ol استفاده کنیم. این تگ موارد را با ذکر شماره در کنار هر خط به صورت خودکار نمایش می دهد.

<ol>
    <li>item 1</li>
    <li>item 2</li>
</ol>
  1. item 1
  2. item 2

اما اگر ترتیب آن ها مهم نباشد و صرفا ذکر آن ها اهمیت داشته باشد می توانم از تگ ul استفاده کنیم. در این صورت اعداد حذف می شوند و فقط متن ها با یک بولت نمایش داده می شود.

<ul>
    <li>item 1</li>
    <li>item 2</li>
</ul>
  • item 1
  • item 2

Comments (۰)

Reply