آموزش تگ input در HTML

آموزش تگ input در HTML

تگ <input> در HTML برای ایجاد فیلدهای ورودی در فرم‌ها استفاده می‌شود. این تگ دارای انواع مختلفی از فیلدهای ورودی مانند متنی، رمزعبور، عددی، تاریخ و … است. در این مقاله، ما تمامی حالت‌ها و ویژگی‌های تگ <input> را بررسی می‌کنیم و با مثال‌های عملی آن‌ها را توضیح می‌دهیم.

1. تگ input در HTML

تگ <input> برای ایجاد فیلدهای ورودی در فرم‌ها استفاده می‌شود. این تگ به صورت خودبخود بسته است و بدون تگ بسته‌کننده (</input>) استفاده می‌شود.

<input type="text" name="username" placeholder="نام کاربری">

2. انواع تگ input

2.1. type="text"

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

<input type="text" name="username" placeholder="نام کاربری">

2.2. type="password"

این نوع برای ورودی‌های رمزعبور استفاده می‌شود و متن وارد شده به صورت رمزنگاری شده نمایش داده می‌شود.

<input type="password" name="password" placeholder="رمز عبور">

2.3. type="number"

این نوع برای ورودی‌هایی استفاده می‌شود که فقط مقادیر عددی را می‌پذیرند.

<input type="number" name="age" placeholder="سن">

2.4. type="email"

این نوع برای ورودی‌هایی که ایمیل را می‌پذیرند استفاده می‌شود و بررسی معتبر بودن فرمت ایمیل را انجام می‌دهد.

<input type="email" name="email" placeholder="ایمیل">

2.5. type="checkbox"

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

<input type="checkbox" name="hobbies" value="reading">
<label for="reading">خواندن</label><br>
<input type="checkbox" name="hobbies" value="painting">
<label for="painting">نقاشی</label><br>
<input type="checkbox" name="hobbies" value="gardening">
<label for="gardening">باغبانی</label>

2.6. type="radio"

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

<input type="radio" id="male" name="gender" value="male">
<label for="male">مرد</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">زن</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">سایر</label>

2.7. type="submit"

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

<input type="submit" value="ارسال">

3. ویژگی‌های تگ input

3.1. name

این ویژگی نام میدان ورودی را مشخص می‌کند که با استفاده از آن می‌توان به مقدار وارد شده در فیلد دسترسی پیدا کرد.

<input type="text" name="username">

3.2. placeholder

این ویژگی متنی را به عنوان راهنما درون فیلد ورودی نمایش می‌دهد.

<input type="text" name="username" placeholder="نام کاربری">

3.3. value

این ویژگی مقدار پیشفرض فیلد ورودی را مشخص می‌کند.

<input type="text" name="username" value="John">

3.4. required

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

<input type="text" name="username" required>

4. مثال کامل

<form>
   <label for="username">نام کاربری:</label>
   <input type="text" id="username" name="username" required><br><br>
   
   <label for="password">رمز عبور:</label>
   <input type="password" id="password" name="password" required><br><br>
   
   <label for="age">سن:</label>
   <input type="number" id="age" name="age" min="18" max="100" required><br><br>
   
   <label for="email">ایمیل:</label>
   <input type="email" id="email" name="email" required><br><br>
   
   <input type="submit" value="ثبت">
</form>

در این مثال یک فرم ساده با فیلدهای مختلف تگ <input> نشان داده شده است.

با استفاده از تگ <input> در HTML، می‌توانید فرم‌های متنوعی با قابلیت‌های متنوع و کارآمد ایجاد کنید. این تگ یکی از اصلی‌ترین عناصر در طراحی وبسایت‌های تعاملی است.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
Python - محدود کردن داده (MongoDB Limit)

Python – محدود کردن داده (MongoDB Limit)

Python MongoDB محدود کردن نتایج برای محدود کردن نتایج در MongoDB، از متد limit() استفاده می‌کنیم. متد limit() یک...

بیشتر بخوانید
Python - بروزرسانی (MongoDB Update)

Python – بروزرسانی (MongoDB Update)

به‌روزرسانی یک رکورد برای به‌روزرسانی یک رکورد یا سند در MongoDB، از متد update_one() استفاده می‌کنیم. پارامتر اول متد...

بیشتر بخوانید
Python - حذف کالکشن (MongoDB Drop Collection)

Python – حذف کالکشن (MongoDB Drop Collection)

حذف کالکشن شما می‌توانید یک جدول یا کالکشن در MongoDB را با استفاده از متد drop() حذف کنید. مثالحذف...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.