آموزش تگ 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، می‌توانید فرم‌های متنوعی با قابلیت‌های متنوع و کارآمد ایجاد کنید. این تگ یکی از اصلی‌ترین عناصر در طراحی وبسایت‌های تعاملی است.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام