عناصر فرم ها در HTML

عنصر <input>

در جلسه ی قبل به صورت خلاصه اشاره ای به این عنصر داشتیم اما در این قسمت کمی مفصل تر صحبت خواهیم کرد. مهم ترین عنصر یک فرم <input> است که بر اساس مقدار type میتواند به انواع و اشکال مختلفی ظاهر شود:

<!DOCTYPE html>
<html>
<body>

<h2>The input Element</h2>

<form action="/action_page.php">
  Enter your name:
  <input name="firstname" type="text">
  <br><br>
  <input type="submit">
</form>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: اگر مقدار type را خالی بگذارید، مقدار پیش فرض که همان text است برایش تعیین می شود.

عنصر <select>

این عنصر یک لیستِ drop-down را می سازد. لیست های drop-down لیست هایی هستند که با کلیک روی آن ها می توانید از بین گزینه هایشان که نمایان می شود انتخاب کنید. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<h2>The select Element</h2>
<p>The select element defines a drop-down list:</p>

<form action="/action_page.php">
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit">
</form>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: این خروجی ها تنها برای نمایش ظاهر این عناصر هستند و فاقد قدرت پردازشی می باشند، بنابراین با کلیک روی submit اتفاقی نمی افتد اما در حالت واقعی داده ها پردازش خواهند شد.

هر کدام از <option> های بالا یکی از گزینه های لیست ما می باشد و در حالت پیش فرض اولین <option> بدون کلیک و در فیلد ما نمایان خواهد بود. اگر می خواهید این موضوع را تغییر دهید و <option> مورد نظر خود را گزینه ی پیش فرض کنید از selected استفاده کنید:

<!DOCTYPE html>
<html>
<body>

<h2>Pre-selected Option</h2>
<p>You can preselect an option with the selected attribute.</p>

<form action="/action_page.php">
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat" selected>Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit">
</form>

</body>
</html>

مشاهده ی خروجی در JSBin

همچنین اگر می خواهید تعداد گزینه هایی که نمایان هستند افزایش پیدا کنند، می توانید از size استفاده کنید:

<!DOCTYPE html>
<html>
<body>

<h2>Visible Option Values</h2>
<p>Use the size attribute to specify the number of visible values.</p>

<form action="/action_page.php">
  <select name="cars" size="3">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit">
</form>

</body>
</html>

مشاهده ی خروجی در JSBin

در آخر اگر می خواهید کاربر بتواند چندین گزینه را انتخاب کند از multiple استفاده می کنید:

<!DOCTYPE html>
<html>
<body>

<h2>Allow Multiple Seletcions</h2>
<p>Use the multiple attribute to allow the user to select more than one value.</p>

<form action="/action_page.php">
  <select name="cars" size="4" multiple>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit">
</form>

<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

برای این کار کاربر باید کلید کنترل (Ctrl) را نگه دارد و سپس گزینه های مورد نظرش را انتخاب کنید. بدین ترتیب می توان چندین گزینه را انتخاب نمود. می توانید این مورد را در مثالا بالا امتحان کنید.

عنصر <textarea>

عنصر <textarea> یک فیلد متنیِ چند خطی را ایجاد می کند. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<h2>Textarea</h2>
<p>The textarea element defines a multi-line input field.</p>

<form action="/action_page.php">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br>
  <input type="submit">
</form>

</body>
</html>

مشاهده ی خروجی در JSBin

در کد بالا rows مسئول مشخص کردن تعداد خطوط قابل رویت در text area و cols مسئول مشخص کردن عرض قابل رویت آن هستند. البته می توانید این اندازه ها را با CSS نیز تعیین کنید:

<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>

عنصر <button>

عنصر <button> یک دکمه را تعریف می کند:

<!DOCTYPE html>
<html>
<body>

<h2>The button Element</h2>

<button type="button" onclick="alert('سلام کاربر گرامی')">روی من کلیک کن</button>

</body>
</html>

مشاهده ی خروجی در JSBin

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

نکته: مرورگر های مختلف ممکن است از مقادیر مختلفی برای حالت پیش فرضِ type استفاده کنند بنابراین بهتر خودتان آن را مشخص کنید.

عناصر HTML5

با معرفی HTML5 دو عنصر دیگر نیز به عناصر بالا اضافه شدند:

<datalist>
<output>

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

عنصر <datalist> لیستی از گزینه های از پیش تعیین شده را برای <input> ایجاد می کند و کاربران هنگام کار با آن با یک لیست drop-down سر و کار دارند. همچنین list مربوط به <input> باید به id مربوط به <datalist> اشاره کند.

مثال:

<!DOCTYPE html>
<html>
<body>

<h2>The datalist Element</h2>
<p>The datalist element specifies a list of pre-defined options for an input element.</p>

<form action="/action_page.php">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

<p dir='rtl'><b>هشدار:</b> این قابلیت در مرورگر های سافاری و اینترنت اکسپلورر 9 و قبل تر پشتیبانی نمی شود</p>

</body>
</html>

مشاهده ی خروجی در JSBin

عنصر <output> نیز نماینده ی یک محاسبه است (معمولا محاسبه هایی که با اسکریپت و در سمت سرور انجام می شوند):

<!DOCTYPE html>
<html>
<body>

<h2>The output Element</h2>
<p>می توانید مقدار جمع این دو عدد را به راحتی پیدا کنید</p>

<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range" id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

<p dir='rtl'><strong>هشدار:</strong> این قابلیت در Edge 12 و IE و مرورگر های قدیمی پشتیبانی نمی شود</p>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: این عملیات فعلا کار نمی کند چرا که برای محاسبه ی این اعداد و دریافت خروجی شان نیاز دارید در سمت سرور هم کدهایش را بنویسید.

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