ایجاد فرم در HTML

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

استفاده از تگ های <form> در HTML

برای ایجاد فرم در HTML ، باید از تگ <form>استفاده کنید:

<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>

با این حال، خود تگ ها به تنهایی فرم را ایجاد نمی کنند.

عنصر <form> به عنوان یک ظرف برای عناصر فرم، عملکردهای مورد نظر شما را در HTML ایجاد و تعریف می کند.

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

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

عناصر جدید فرم در HTML5

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

<input list="names">
  <datalist id="names">
    <option value="Tom">
    <option value="Sam">
    <option value="Jack">
    <option value="Annie">
    <option value="Rich">
  </datalist>
</input>

توجه: ویژگی id عنصر <datalist> باید با ویژگی لیست عنصر <input> مطابقت داشته باشد.

عنصر <output>  نتیجه یک محاسبه را تعریف می کند. اگر دو یا چند ورودی عددی داشته باشید، این عنصر می تواند نتیجه را ایجاد کند:

<form oninput="result.value=parseInt(x.value)+parseInt(y.value)">
  0<input type="range" id="x" value="75">100
  +<input type="number" id="y" value="72">
  =<output name="result" for="x y"></output>
</form>

عنصر <keygen> یک جفت کلید خصوصی و عمومی ایجاد کرد تا هنگام ارسال فرم از آن استفاده شود. با این حال، این عنصر دیگر در HTML5 پشتیبانی نمی کند:

<form action="login" method="POST">
  Username: <input type="text" name="user_name">
  Password: <input type="password" name="user_password">
  Keygen Strength: <keygen name="login_form">
  <input type="submit" value="Login">
</form>

عناصر معمول  و رایج فرم در HTML

مسلما عنصر <input> مهم ترین عنصر شکل است. این یک مکان ورودی برای کاربر تعریف می کند، که می تواند به آن قالب های مختلف مشخص شده توسط نوع ویژگی را ارائه دهد. در مثال زیر می توانید type = "text" را مشاهده کنید، بنابراین کادر کاربر به او نشان داده می شود که باید در آن با استفاده از صفحه کلید خود تایپ کنید:

Email: <input type="text" name="email"><br>
Name: <input type="text" name="name"><br>
<input type="submit" value="Submit">

همه انواع ورودی HTML5 را در جدول زیر مشاهده کنید:

emaildatetime-localdatecolorcheckboxbutton
passwordnumbermonthimagehiddenfile
telsubmitsearchresetrangeradio
weekurltimetext

عنصر <textarea> هنگامی مفید است که ما به داده های متنی نیاز داریم اما یک خط واحد که یک متن ارائه می دهد کافی نیست. این یک منطقه چند خطی برای ورودی کاربر فراهم می کند:

<textarea rows="2" cols="50">
  I am writing multiline text here. Some more text. Text. Text. Text. Text.
</textarea>

تگ <label> نامی برای عنصر <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>

عنصر <fieldset> عناصر مرتبط را گروه بندی می  کند که سپس در یک جعبه جداگانه نمایش داده می شوند. این کار معمولا برای عناصری استفاده می شود که استفاده از آنها به تنهایی معنی ندارد.

به عنوان مثال دکمه های رادیویی:

<form>
  <fieldset>
    <legend>Student:</legend>
    Name: <input type="text"><br>
    Surname: <input type="text"><br>
    Class: <input type="text"><br>
    Favourite food: <input type="text">
  </fieldset>
</form>

نکته: اگر می خواهید کاربر شما بتواند چندین گزینه را در فرم HTML خود انتخاب کند، گروهی از کادرهای تایید می تواند گزینه مناسبی باشند.

عنصر <legend> عنوانی را برای عنصر <fieldset>  ایجاد می کند:

<form>
  <fieldset>
    <legend>Student:</legend>
    Name: <input type="text"><br>
    Surname: <input type="text"><br>
    Favourite class: <input type="text"><br>
  </fieldset>
</form>

عنصر<select> یک لیست کشویی HTML ایجاد می کند:

<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>

حداقل برای انتخاب صحیح لیست کشویی HTML باید حداقل یک گزینه داشته باشید. برای این منظور، باید از برچسب های <option> استفاده کنید. یک جغت تگ، یک گزینه واحد را مشخص می کند، اما شما می توانید به تعداد مورد نیاز اضافه کنید:

<p>Which pet would you like to keep at home?</p>
  <select>
  <option value="cat">Cat</option>
  <option value="wolf">Wolf</option>
  <option value="llama">Llama</option>
</select>

هم چنین می توانید با استفاده از تگ <optgroup> گزینه های مرتبط را در یک لیست کشویی HTML گروه بندی کنید:

<select>
  <optgroup label="Sports">
    <option value="baseball">Baseball</option>
    <option value="basketball">Basketball</option>
  </optgroup>
  <optgroup label="Shopping">
    <option value="food">Food</option>
    <option value="gift">Gift</option>
  </optgroup>
</select>

نکات مهم عناصر ایجاد فرم در HTML

  • فراموش نکنید که دکمه ارسال را در انتهای فرم خود قرار دهید تا کاربر بتواند داده ها را به سرور ارسال کند. می توانید این کار را با استفاده از عنصر <input> با مشخصه type و مقدار آن که به صورت submit تعریف شده است انجام دهید.
  • تعریف نام برای کنترل یک فرم خاص با استفاده از ویژگی name به سرور کمک می کند مقدار ورودی را شناسایی کند.

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

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

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

Related Posts