فرم ها و ورودی ها در HTML (جلسه دهم)

سلام و وقت بخیر خدمت شما دوستان و همراهمان مِستر آموز.

 

با یک جلسه ای دیگر از آموزش HTML با شما همراه هستیم. در این جلسه قصد داریم به آموزش فرم ها و داده های ورودی بپردازیم با ما همراه باشید.

 

فرم ها و داده ها ورودی

یک فرم شامل عناصری می باشد که به کاربر اجازه ورود اطلاعاتی را وارد صفحه ما میکند، و ما با دریافت آن اطلاعات به اهدافی که داریم برسیم. یک فرم توسط برچسب <form> ایجاد می شود. شکل کلی تعریف فرم به شکل زیر است.

<form>
    
    عناصر
    
</form>

فرم دارای عناصری مختلفی می باشد که تک تک آنها را توضیح خواهیم داد.

 

برچسب <input>:

مهم ترین و پرکاربرد ترین برچسب در فرم ها برچسب <input> می باشد. که خصیصه های مختلفی دارد:

 

جعبه متن:

وقتی می خواهیم کاربر کلمات یا اعدادی را در فرم بنویسید از جعبه متن باید استفاده کنیم. برای گذاشتن جعبه متن در فرم باید به خاصیت تایپ تگ <input> را مساوی با text کنیم مانند شکل زیر:

<input type="text">

نکته: اندازه پیش فرض برای جعبه متن در اکثر مرورگر ها برابر با 20 حرق می باشد. اگر می خواهید اندازه آن را تغییر بدهید باید از خاصیت size استفاده کنید. به مثال زیر دقت کنید.

<form>
    <input type="text" />
    <br />
    <input type="text" size="40" />
</form>

خروجی:

توجه داشته باشید که خود فرم قابل رویت نیست و فق عناصر داخل آن را می توانیم ببینیم.

 

دکمه های رادیویی

این دکمه ها زمانی کاربرد دارند که قصد داشته باشیم یکی از چند گزینه به تعداد محدود را انتخاب کند. این دکمه ها را توسط مشخصه “type=”radio تعیین می کنیم. اگر چند دکمه رادیویی هم نام داشته باشیم با انتخاب یکی از آنها دیگر دکمه از حالت انتخاب خارج می شوند.

نکته: می توانیم با اختصاص دادن کلمه checked به فقط یکی از دکمه های رادیویی آن دکه را به صورت پیش فرض انتخاب شده قرار دهیم. مثال زیر در همین رابطه است.

<form>
	<input type="radio" name="s" value="male" > Male
    <br>
	<input type="radio" name="s" value="female" checked="checked"> Female
</form>

خروجی:

همان طور که در قطعه کد بالا می بینید هر دوی دکمه ها با یک نام تنظیم شده اند و مشخصه checked دکمه دوم فعال است و برای همین به صورت پیش فرض انتخاب شده است.

 

جعبه انتخاب:

زمانی از این جعبه استفاده می کنیم که بخواهیم کاربر یک یا چند گزینه به تعداد محدود را انتخاب کند. جعبه انتخاب با مشخصه “type=”checkbox نوشته می شود.

در این جعبه کاربر می تواند یک یا چند گزینه را همزمان انتخاب کند. این جعبه مانند جعبه رادیوی می توانیم از کلمه checked برای انتخاب پیش فرض استفاده کنیم. مثال زیر را ببینید:

<p> از کدام ماشین خوشتان می آید؟ </p>
<form>
    BENZ <input type="checkbox" name="car" checked="checked" /><br />
    BMW <input type="checkbox" name="car" /><br />
    TOYOTA  <input type="checkbox" name="car" /><br />
</form>

خروجی:

همان طور که می بینید این جعبه هم باید عناصر را هم نام بنویسید. تفاوت این جعبه با جعبه قبل این است که می توان به صورت هم زمان چند گزینه را انتخاب کرد.

 

کلمه عبور:

همان طور که از اسمش پیداست برای وارد کردن کلمه عبور استفاده می شود. با مشخصه “type=”password تعیین می شود.

 

 

دکمه:

دکمه توسط “type=”button مشخص می شود و نوشته روی آن توسط مشخصه “value=”text معرفی می شود. ساخت دکمه شیوه دیگری نیز دارد و آن استفاده از تگ <button> است.

هر دکمه عکس العملی را انجام می دهد و این عکس العمل را ما برای آن تعریف می کنیم. دکمه ها کاربرد های مختلفی می توانند داشته باشند. و این کاربرد های را در مباحثی مانند Java Script که در آینده نه چندان دور در مِستر آموز آموزش می دهیم را می توانیم استفاده کنیم.

در مثال زیر طریقه ساخت دکمه به 2 روش را می بینید:

<input type="button" value="OK" />
<br />
<button> Cansel </button>

خروجی:

 

جعبه drop down:

از این جعبه برای ساخت فهرستی است که یکی از گزینه های آن قابل رویت است و با کلیک کردن روی آن بقیه گزینه ها نیز دیده می شوند. و تنها یکی از موارد آن را می توانیم انتخاب کنیم. این جعبه توسط برچسب <select> تعیین می گردد. و موارد آن هم توسط برچسب <option> ایجاد می شوند. به طور پیش فرض گزینه اول انتخاب شده است و اگر قصد تعویض گزینه پیش فرض را داشته باشید. باید برای گزینه دلخواه کلمه selected را برچسب <option> اختصاص بدهید.

<form>
	<select name="Cars">
		<option value="Benz">Volvo </option>
		<option value="BMW">Saab </option>
		<option value="TOYOTA">Fiat </option>
		<option value="Audi">Audi </option>
	</select>
</form>

خروجی:

جعبه textarea

گاهی اوقات شما نیاز دارین که کاربر متنی طولانی تر از یک خط را بنویسد. در چنین حالتی این جعبه به کار میاد. در این جعبه می توانید به کاربر اجازه دهید که بیش از یک خط متن بنویسد که معمولا برای توضیحات یا نظر دادن از این جعبه استفاده می کنند.

این جعبه توس برچسب <textarea> مشخص می شود و تعداد سطر ها و ستون ها را توسط مشخصه های rows و cols تعیین می شوند. مثال زیر را ببنید:

<form>
<textarea name="text1" rows="5" cols="20">
The cat was playing in the garden.
</textarea>
</form>

خروجی:

فرم حاشیه دار:

این فرم با برچسب <fieldest> شما می توانید یک حاشیه دور عناصر فرم خود ایجاد کنید و توسط برچسب <legend> می توانید عنوانی را برای آن در نظر بگیرید.

<fieldset>
<legend>Health information:</legend>
<form>
Height <input type="text" size="3">
Weight <input type="text" size="3">
</form>
</fieldset>

خروجی:

مشخصه action در فرمها و دکمه ارسال:

زمانی که کاربر عناصر فرم را پر کرد بر روی دکمه Submit یا Save کلیک می کند. با کلیک روی این دکمه محتویات فرم به فایل با آدرس دیگری فرستاده می شود. مشخصه action ، نام آن فایل یا آدرس را مشخص می کند، که فایل مقصد معمولا دارای ابزاری برای دریافت اطلاعات فرستاده می باشد. این ابزار در مباحث ASP و CGI توضیح داده می شوند. در مثال زیر شیوه ارسال اطلاعات توسط “method=”get مشخص می شود،

<form action="file.html">
Name: <input type="text"  /><br />
Family: <input type="text" /> <br />
<input type="submit" value="Save" />
</form>

خروجی:

 

دکمه Reset:

می توانید این دکمه را هم در فرم قرار دهید که کاربر با کلیک بر آن اطلاعات فرم را به صورت پیش فرض برگرداند.

<input type="reset">

 

 

 

موفق و پیروز باشید.