فرم ها در html

تگ form

تگ فرم برای ایجاد قابلیت های تعاملی (دکمه، فیلدهای متنی، امکان آپلود فایل و…) و برای دریافت ورودی از سمت کاربر در صفحات html استفاده می شود. تگ form به تنهایی کاربردی ندارد و با خصوصیاتی مانند action و تگ های input داخل آن بکار برده می شود.

خاصیت action در form :

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

خاصیت method در form :

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

همان طور که گفته شد، تگ form به تنهایی قابلیت خاصی در اختیار کاربران قرار نمی دهد و با تگ های input ، select ،text area و .. که زیر مجموعه های این تگ می باشند کارایی پیدا می کند.

  • تگ input: ای تگ شامل خاصیت هایی می شود که برای ایجاد دکمه های رادیویی، دکمه ارسال، فیلدهای متنی (متن کوتاه) ، فیلدهای مربوط به رمز عبور، فیلد آپلود فایل و… کاربرد دارد.
  • تگ select: این تگ در کنار تگ option برای ایجاد منوهای بازشونده و انتخاب یک یا چند مورد استفاده می شود.
  • تگ textarea: این تگ برای دریافت متن های طولانی بکار برده می شود.
  •  

تگ input

این تگ با تنظیم type های مختلف برای آن می توان انواع مختلفی از امکانات از قبیل فیلد متنی (text)، فیلد رمز عبور (password)، دکمه معمولی (button)، دکمه ارسال (submit) و … را ایجاد کرد.

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

نوع text

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

<form action="users/get.php" method="get">
   <input type="text" name="firstname">
</form>

نوع password

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

<form action="users/get.php" method="get">
   <input type="password" name="password" />
</form>

نوع button

برای ایجاد دکمه های ساده به کار می رود، یک دکمه معمولی باید به همراه دستورات جاوا اسکریپت تکمیل شود در غیر این صورت به خودی خود کاربردی ندارد.

<form action="users/get.php" method="get">
   <input type="button" value="دکمه" onclick="alert('دکمه در تگ فرم باید با دستورات جاوا اسکریپت تکمیل شود')" />
</form>

نوع submit

از این نوع برای ایجاد دکمه ارسال اطلاعات فرم استفاده می شود.

<form action="users/get.php" method="get">
   <input type="submit" value="ارسال" />
</form>

نوع reset

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

<form action="users/get.php" method="get">
   <input type="reset" value="نوشتن از نو" />
</form>

نوع checkbox

از این نوع به همراه تگ input برای ایجاد چک باکس بکار برده می شود.

<form action="users/get.php" method="get">
   <input type="checkbox" checked="checked" name="choose" value="1"/>
</form>

نوع file

برای آپلود یک فایل به سرور استفاده می شود.

<form action="users/get.php" method="get" enctype="multipart/form-data">
   <input type="file" name="file-name" accept="image/gif,image/jpg,application/pdf" />
</form>

برای اینکه این نوع به درستی عمل کند، باید خاصیت enctype را با مقادیر multipart/form-data به تگ form اضافه کنیم.
نکته: پارامتر اختیاری accept مشخص کننده فرمت های مجازی است که از طریق فیلد، قابل آپلود هستند، این فرمت ها بر اساس استاندارد MIME یا (Multipurpose Internet Mail Extensions) مشخص می شوند. لیست کامل از فرمت ها و معادل آنها در استاندارد MIME

آیا واقعا به وب سایت نیاز داریم؟
شاید این مطلب را نیز بپسندید

نوع hidden

برای ارسال فیلدهای مخفی به سمت سرور بکار برده می شود.

<form action="users/get.php" method="get">
   <input type="hidden" name="hidden-name" value="13" />
</form>

نوع radio

از این نوع برای ساخت دکمه های رادیویی در فرم های وب استفاده می شود.

<form action="users/get.php" method="get">
   <input type="radio" name="radio-box" value="1" />
</form>

تگ select در form

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

<form action="users/get.php" method="get">
   <select name="select-option">
      <option value="0" selected="selected">انتخاب کنید</option>
      <option value="1">html</option>
      <option value="2">css</option>
      <option value="3">java script</option>
   </select>
</form>

در حالت عادی در هر تگ select کاربران مجاز به ارسال تنها یک مقدار می باشند، برای اجازه ارسال چندین مقداردر این تگ، باید خاصیت multiple را به آن اضافه کنیم.

<form action="users/get.php" method="get">
   <select name="select-option[]" multiple="multiple">
      <option value="0" selected="selected">انتخاب کنید</option>
      <option value="1">html</option>
      <option value="2">css</option>
      <option value="3">java script</option>
   </select>
</form>

تگ textarea در form

از این تگ جهت ایجاد فیلدهای متنی طولانی بکار برده می شود، به عنوان مثال برای وارد کردن یادداشت، ارسال مطلب، نمایش یک متن کپی رایت و… کاربرد دارد.

<form action="users/get.php" method="get">
   <textarea name="your-text" cols="50" rows="8">
</textarea>
</form>

از خاصیت cols برای تعیین عرض(اندازه ستون ها) و از خاصیت rows برای تعیین ارتفاع(تعداد سطرها) استفاده می شود.

استفاده از label در form

برای ایجاد برچسب های استاندارد در فرم ها از تگی با نام label استفاده می شود، label در واقع نقش معرف و برچسب را برای تگ های فرم ایفا می کند.

<form action="users/get.php" method="get">
   <label for="your-text">یادداشت:</label>
      <textarea name="your-text" cols="50" rows="8" id="your-text"
</textarea>
</form>

برای هر فیلدی که قصد تعریف برچسب داریم، یک id تعریف کرده و با خاصیت for برچسب را به آن نسبت می دهیم.

آموزش Html(بخش هشتم)