فرم ها در HTML و اتربیوت های مربوط به آن

اصلی ترین تگی که باید استفاده کنیم تگ <form></form> است. اما این تگ به تنهایی کافی نیست بلکه باید از تگ‌های دیگری درون آن استفاده کنیم. مهم‌ترین عنصری که درون تگ فرم قرار می‌گیرد، تگ مربوط به input است. این تگ یک فیلد متنی ساده ایجاد می‌کند. اما نکته جالبی که وجود دارد این است که این فیلد متنی را می‌توان به شکل‌های بسیار متفاوتی درآورد. فیلدهایی مخصوص ایمیل، رمز عبور، دریافت فایل و… ایجاد کرد. ابتدا مثال زیر را اجرا کنید.

<form>

<input>

</form>

اگر این مثال را اجرا کنید، می‌بینید که تنها یک فیلد خالی ایجاد می‌شود. با استفاده از اتربیوت type می‌توانید انواع مختلفی را ایجاد کنید.

نام و نام خانوادگی:

<input type=”text”>

اتربیوت text حالت پیش فرض را ایجاد می‌کند. اما اکنون مقدار password را برای آن قرار می‌دهیم تا فیلد مخصوص رمز را برای ما ایجاد کند. در این حالت وقتی کاربر فیلد را پر می‌کند کاراکتر‌هایی را که وارد می‌کند به صورت مخفی هستند. این مورد را مانند زیر امتحان کنید.

<form>

<input type=”password” >

</form>

اگر از مقدار email استفاده کنیم، فیلدی برای نوشتن ایمیل ایجاد می‌شود که کاربر باید طبق قالب ایمیل فیلد را پر کند.

<form>

ایمیل خود را وارد کنید

<input type=”email” >

</form>

مقدار دیگری مثل submit دکمه ای برای ارسال فرم ایجاد می‌کند. این فیلد را می‌توانیم به صورت زیر ایجاد کنیم:

<form>

<input type=”submit” >

</form>

مقدار reset نیز دکمه ای را ایجاد می‌کند که با کلیک کردن کاربر روی آن اطلاعاتی که درون فیلدها نوشته پاک می‌شوند. برای این حال می‌توانیم به صورت زیر عمل کنیم:

<form>

<input type=”reset” >

</form>

اتربیوت جالب و کاربردی دیگر radio است. این مقدار برای فیلدهای موردی که قرار است کاربر تنها یک مورد را برگزیند استفاده می‌شود، مثلا:

<form>

مدرک تحصیلی شما چیست؟

<input type=”radio” >دیپلم

<input type=”radio” >فوق دیپلم

<input type=”radio” >لیسانس

<input type=”radio” >فوق لیسانس

</form>

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

<form>

به کدام رنگ علاقه دارید؟

<input type=”checkbox” >آبی

<input type=” checkbox” >قرمز

<input type=” checkbox” >سبز

<input type=” checkbox” >زرد

</form>

اتریبیوت های مهم تگ input

اتربیوت‌های مهمی برای تگ input وجود دارد که لازم است آن‌ها را بدانید. یکی از این اتربیوت‌های مهم و بسیار ضروری name است که اگر آن را برای input ننویسیم، مقدار آن ارسال نمی‌شود، یعنی اگر کاربر آن فیلد را پر کند و ارسال فرم را بزند هیچ اطلاعاتی از آن فیلد ارسال نمی‌شود. مقدار این اتربیوت را با توجه به فیلدی که ایجاد کرده‌ایم می‌نویسیم، مثلا برای فیلد نام از f-name استفاده می‌کنیم. مثال:

نام :

<input type=”text” name=”f-name”>

اتربیوت value یک مقدار اولیه برای فیلد در نظر می‌گیرد که اگر کاربر آن را پر نکند و فرم را ارسال کند آن مقدار به صورت پیش فرض ارسال می‌شود. مثلا:

نام :

<input type=”text” name=”f-name” value=”رضا”>

اتربیوت readonly و disabled و placeholder و required نیز هر کدام کار خاصی را انجام می‌دهند که در ویدئو توضیح داده شده اند.

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

اهل کدام شهر هستید؟

<select>

<option>مشهد</option>

<option>خرم آباد</option>

</select>

گاهی ممکن است بخواهیم یک کادر متنی را برای درخواست‌های کاربران در سایت قرار دهیم، برای ایجاد این کادر متنی باید از تگ زیر استفاده کنیم

<form>

<textarea name=”message”>لطفا درخواست خود را بنویسید</textarea>

</form>

اتریبیوت های مهم تگ فرم (form)

و اما حالا می‌خواهیم اتربیوت‌های مهم تگ فرم را یاد بگیریم. برخی اتربیوت‌ها برای عنصر فرم وجود دارد که بسیار ضروری هستند. یکی از این اتربیوت‌ها ، action است که وظیفه اش این است وقتی کاربر فرم را ارسال کرد، فرم را به صفحه ای که برای پردازش اطلاعات هست ببرد. درواقع action عملی روی اطلاعات فرم‌ها انجام نمی‌دهد و فقط آن‌ها را به صفحه ای منتقل می‌کند. پس کافی ست ما آدرس صفحه ای که مربوط به پردازش هست را به اتربیوت action بدهیم.

<form action=”آدرس صفحه”>

…

</form>

ما می‌توانیم از اتربیوت target برای این تگ هم استفاده کنیم و تعیین کنیم که پاسخ فرم در کجا باز شود؟ در تب جدید یا اینکه در پنجره جدید؟ یا … هر کدام از این مقادیر را که بخواهیم می‌توانیم به این اتربیوت بدهیم.

آخرین اتربیوتی که می‌خواهیم بیان کنیم، method است. این اتربیوت یکی از دو مقدار post و get را می‌تواند بگیرد. اگر مقدار get را به آن بدهیم وقتی کاربر اطلاعات خود را در فرم وارد می‌کند و دکمه ارسال را می‌زند تمام اطلاعاتی را که وارد کرده است در نوارآدرس دهی نمایان می‌شوند. که این حالت برای ارسال اطلاعات شخصی و حساس مناسب نیست. اما اگر از مقدار post استفاده کنیم این اتفاق نمی‌افتد و اطلاعات وارد شده درنوار آدرس دهی نمایان نمی‌شوند.