انواع فرم در HTML

دسته بندی : آموزش HTML سطح مقاله : متوسط زمان مطالعه : 3 دقیقه 20 آبان 1399
انواع-فرم-در-HTML

درک فرم در HTML

فرم های HTML با ارسال اجازه داده ها به وب سایت به شما کمک می کند تا با کاربران خود تعامل داشته باشید. برای مقداردهی اولیه فرم در HTML ، باید از یک جفت تگ <form> برای بسته بندی عناصر فرم استفاده کنید (به عنوان مثال ، مناطق ورودی متن و دکمه ها):

<form action="/action_page.php">
  First name:<br><input type="text" name="name" value="John"><br>
  Last name:<br><input type="text" name="surname" value="Snow"><br>
  <input type="submit" value="Submit">
</form> 

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

Multiple choice elementsText input elements
Radio buttonsText field

Checkboxes
Text area

Dropdown lists
assword field

برای تعیین یک منطقه ورودی ، باید ازتگ <input> استفاده کنید:

<form> 
  <br>First name:<br>
  <input type="text" name="first name" placeholder="firstname"> 
  <br>Last name:<br>
  <input type="text" name="lastname" placeholder="lastname"> 
</form>

همچنین برای تعیین نوع داده هایی که فرم HTML شما می تواند از کاربر دریافت کند ، باید یک ویژگی type نیز در آن گنجانده شود. اینها همه مقادیری است که می تواند در HTML5 بدست آید:

emaildatetime-localdatecolorcheckboxbutton
passwordnumbermonthimagehiddenfile
telsubmitsearchresetrangeradio
weekurltimetext

در فرم های HTML معمولاً دکمه هایی وجود دارد که به کاربران امکان می دهد داده ها را به سرور ارسال کنند. برای ایجاد یک دکمه قابل کلیک ، می توانید از عنصر <input> با مشخصه نوع و مقدار آن به عنوان ارسال تعریف کنید. همچنین می توانید از تگ <button> استفاده کنید:

<button name="submit">
  <strong>Please contact</strong> us today.
</button>

عناصر مشترک برای فرم های HTML

برای جمع آوری داده های چند خطی متنی ، باید از عنصر <textarea> برای فرم خود در HTML استفاده کنید. از آنجا که عنصر فقط به یک نوع مقدار نیاز دارد ، نیازی به ویژگی type نخواهید داشت:

<textarea name="comment" cols="30" rows="3" id="comment">Write your comments here</textarea> 

عنصر <label> تگ عنصر ورودی را تعریف می کند ، به کاربر اجازه می دهد درک بهتری از فرم داشته باشد:

<label>My Name Field</label>
<input type="text" name="myName" class="myNameInput" required/>

عنصر <fieldset> گروهی از چند عنصر مشابه را تعریف می کند. آنها با هم به عنوان بخشی از فرم HTML نشان داده می شوند اما عناصر ورودی جداگانه را نشان می دهند:

<form action="login" method="POST">
  <fieldset>
    <legend>Login Form:</legend>
    Username: <input type="text" name="user_name">
    Password: <input type="password" name="user_password">
    <input type="submit" value="Login">
  </fieldset>
</form>

برای توصیف عناصر داخل عنصر <fieldset> ، از <legend> استفاده کنید. این به کاربر کمک می کند تا درک کند که <fieldset> به چه اطلاعاتی نیاز دارد:

<form>
  <fieldset>
    <legend>This is the title</legend>
    First input: <input type="text" size="30"><br>
    Second input: <input type="text" size="30"><br>
  </fieldset>
</form>

فرم های چند گزینه ای در HTML

با استفاده از عنصر <select> می توانید به کاربران اجازه دهید داده ها را از مجموعه ای از چند گزینه از پیش تعریف شده انتخاب کنند.

در اینجا متداول ترین انواع این عناصر وجود دارد:

  • دکمه های رادیو
  • کادرهای تأیید
  • لیست های کشویی

برای مشخص کردن این عناصر ، باید از ویژگی type با عناصر <input> خود استفاده کنید. در مثال زیر ، سه دکمه رادیویی ایجاد می کنیم:

<form>
  <input type="radio" name="day" value="monday" checked>Monday<br>
  <input type="radio" name="day" value="tuesday">Tuesday<br>
  <input type="radio" name="day" value="wednesday">Wednesday
</form>

عنصر <option> یک گزینه واحد را در یک چک لیست چند گزینه ای تعریف می کند. شما می توانید به تعداد مورد نیاز گزینه اضافه کنید:

<select name="housepets">
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="llama">Llama</option>
  <option value="rabbit">Rabbit</option>
  <option value="animal">Animal</option>
</select>

ویژگی های فرم های HTML5

مانند اکثر عناصر HTML ، فرم ها می توانند ویژگی های مختلفی را اعمال کنند. اینها مواردی هستند که بیشتر خواهید دید و از آنها استفاده خواهید کرد:

DescriptionAttribute
شخصیت مشخص شده در فرم ارسالی را مشخص می کندaccept‑charset
مقصد داده مورد پردازش را مشخص می کندaction
تکیل فرم بایدخودکار باشدautocomplete
نوغ کدگذاری برای اطلاعات ارسالی را مشخص می کندenctype
روشHTTP را برای ارسال فرم بیان می کندmethod
فرم را در HTML نام گذاری می کندname
به مرورگر اطلاع می دهد تا از تایید صحت فرم خودداری کندnovalidate
متن مکان یاب رادر یک قسمت ورودی متنی مشخص می کندplaceholder
صفحه وب مورد نظر را نشان می دهد که در آن داده های پردازش شده نمایش داده می شودtarget

در اینجا یک مثال ساده از فرم HTML5 با چندین ویژگی آورده شده است:

<form action="index.php" method="post" target="_blank" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
  <p>Form elements</p>
</form>

صفات فعال:

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

<form action="index.php">

در مثال بالا ، هنگامی که کاربر دکمه ارسال را کلیک می کند ، داده ها به یک صفحه وب در سرور به نام index.php منتقل می شوند.

نوشتن یک صفحه اقدام ممکن است برای یک مبتدی کمی پیچیده باشد. با این حال ، بسیاری از میزبانان وب اسکریپت های پیش نویس را برای این ویژگی ها ارائه می دهند.

روش صفت

این ویژگی نوع روشی را که برای انتقال داده های ورودی بر روی فرم های شما در HTML اعمال می شود ، مشخص می کند. این روش می تواند get یا post باشد:

<form action="index.php" method="get">
<form action="index.php" method="post">

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

نکات مهم فرم های HTML

  • به خاطر داشته باشید که فشار دادن ENTER در یک فیلد متنی تنها اجازه می دهدتایک خط متن را به عنوان فشار دادن دکمه ارسال کنید. بنابراین ، هر زمان که به متن بیشتری احتیاج داشت ، مناطق متن را انتخاب کنید.
  • با استفاده از مشخصه برچسب ، منطقه قابل کلیک افزایش می یابد: کاربر ممکن است با کلیک روی برچسب ، گزینه ای را انتخاب کند ، نه تنها ، به عنوان مثال ، کادر تأیید.
  • از یک دکمه رادیویی در فرم HTML5 خود استفاده نکنید: این عنصر فقط وقتی در یک گروه باشد معنایی دارد.

دوره رایگان html را در دویکس دنبال کنید.

چه امتیازی به این مقاله می دید؟

5 / 5.00
[ 1 رای ]
مطالب مشابه

Related Posts