انواع ورودی (Input Types)
در فرم ها، «انواع ورودی فرم» مشخص می کند چه فیلدی می بینیم. «نوع (Type)» یعنی شکل ورودی؛ مثلا متن، عدد، تاریخ، یا رنگ. آرام پیش می رویم، با مثال های کوتاه و کاربردی. اول با تعریف ها آشنا می شویم، بعد تمرین می کنیم.
متنی (text)
ورودی «متن (Text)» یک فیلد یک خطی می سازد. مثل نوشتن نام در فرم مدرسه.
<form>
<label for="fname">First name:</label>
<br>
<input type="text" id="fname" name="fname">
<br>
<label for="lname">Last name:</label>
<br>
<input type="text" id="lname" name="lname">
</form>
گذرواژه (password)
«گذرواژه (Password)» کاراکترها را مخفی می کند. مثل رمز گوشی.
<form>
<label for="username">Username:</label>
<br>
<input type="text" id="username" name="username">
<br>
<label for="pwd">Password:</label>
<br>
<input type="password" id="pwd" name="pwd">
</form>
ارسال (submit)
«ارسال (Submit)» داده ها را به «پردازشگر فرم (Form Handler)» می فرستد.
<form action="/action_page.php">
<label for="fname">First name:</label>
<br>
<input type="text" id="fname" name="fname" value="John">
<br>
<label for="lname">Last name:</label>
<br>
<input type="text" id="lname" name="lname" value="Doe">
<br>
<br>
<input type="submit" value="Submit">
</form>
<form action="/action_page.php">
<label for="fname">First name:</label>
<br>
<input type="text" id="fname" name="fname" value="John">
<br>
<label for="lname">Last name:</label>
<br>
<input type="text" id="lname" name="lname" value="Doe">
<br>
<br>
<input type="submit">
</form>
بازنشانی (reset)
«بازنشانی (Reset)» فرم را به مقادیر پیش فرض برمی گرداند. مثل پاک کردن تخته.
<form action="/action_page.php">
<label for="fname">First name:</label>
<br>
<input type="text" id="fname" name="fname" value="John">
<br>
<label for="lname">Last name:</label>
<br>
<input type="text" id="lname" name="lname" value="Doe">
<br>
<br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
رادیویی (radio)
«رادیویی (Radio)» فقط یک گزینه را می پذیرد. مثل آزمون چهارگزینه ای.
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label>
<br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label>
<br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
چک باکس (checkbox)
«چک باکس (Checkbox)» چند گزینه را می پذیرد. مثل انتخاب سرگرمی ها.
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1">I have a bike</label>
<br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">I have a car</label>
<br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3">I have a boat</label>
</form>
دکمه ساده (button)
«دکمه (Button)» خودش کاری نمی کند. با جاوااسکریپت عمل می کند.
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
انتخاب رنگ (color)
«رنگ (Color)» انتخاب گر رنگ نشان می دهد. مثل عوض کردن تم بازی.
<form>
<label for="favcolor">Select your favorite color:</label>
<br>
<input type="color" id="favcolor" name="favcolor">
</form>
تاریخ (date)
«تاریخ (Date)» یک انتخاب گر تاریخ می آورد. می توانید min و max بدهید.
<form>
<label for="birthday">Birthday:</label>
<br>
<input type="date" id="birthday" name="birthday">
</form>
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<br>
<input type="date" id="datemax" name="datemax" max="1979-12-31">
<br>
<br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<br>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>
تاریخ و زمان محلی (datetime-local)
«datetime-local» تاریخ و زمان بدون منطقه زمانی می گیرد. ساده و مستقیم.
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<br>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
ایمیل (email)
«ایمیل (Email)» هنگام ارسال می تواند بررسی شود. موبایل ها کمک می کنند.
<form>
<label for="email">Enter your email:</label>
<br>
<input type="email" id="email" name="email">
</form>
تصویرِ دکمه (image)
«image» یک تصویر را دکمه ارسال می کند. مسیر در ویژگی src است.
<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
آپلود فایل (file)
«فایل (File)» انتخاب گر فایل نشان می دهد. مثل بارگذاری کاربرگ.
<form>
<label for="myfile">Select a file:</label>
<br>
<input type="file" id="myfile" name="myfile">
</form>
مخفی (hidden)
«مخفی (Hidden)» دیده نمی شود؛ اما در منبع صفحه پیداست. امنیتی نیست.
<form>
<label for="fname">First name:</label>
<br>
<input type="text" id="fname" name="fname">
<br>
<br>
<input type="hidden" id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>
ماه (month)
«ماه (Month)» ماه و سال را می گیرد. برای گزارش های ماهانه خوب است.
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<br>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
عدد (number)
«عدد (Number)» فقط رقم می پذیرد. می توانید بازه بگذارید.
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<br>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
<form>
<label for="quantity">Quantity:</label>
<br>
<input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form>
بازه لغزنده (range)
«range» مقدار حدودی می دهد. مثل ولوم صدا بین صفر تا پنجاه.
<form>
<label for="vol">Volume (between 0 and 50):</label>
<br>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
جستجو (search)
«جستجو (Search)» مثل متن است؛ برای نوار جستجو مناسب تر است.
<form>
<label for="gsearch">Search Google:</label>
<br>
<input type="search" id="gsearch" name="gsearch">
</form>
تلفن (tel)
«تلفن (Tel)» برای شماره تلفن است. می توانید الگو با pattern بدهید.
<form>
<label for="phone">Enter your phone number:</label>
<br>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
زمان (time)
«time» یک زمان می گیرد. منطقه زمانی دخیل نیست.
<form>
<label for="appt">Select a time:</label>
<br>
<input type="time" id="appt" name="appt">
</form>
آدرس وب (url)
«url» برای لینک هاست. مرورگر می تواند فرمت را چک کند.
<form>
<label for="homepage">Add your homepage:</label>
<br>
<input type="url" id="homepage" name="homepage">
</form>
هفته (week)
«week» هفته و سال را می گیرد. برای برنامه هفتگی خوب است.
<form>
<label for="week">Select a week:</label>
<br>
<input type="week" id="week" name="week">
</form>
محدودیت های ورودی ها
ویژگی های رایج: checked، disabled، max، maxlength، min، pattern، readonly، required، size، step، value. این ها محدوده، پیش فرض، و الزامی بودن را تنظیم می کنند.
تمرین سه مرحله ای: انواع ورودی فرم
- یک فرم بسازید و یک ورودی متن بگذارید.
- برای تاریخ، min و max تعیین کنید.
- یک دکمه ارسال بگذارید و فرم را تست کنید.
نکته: مقدار پیش فرض type برابر «text» است.
جمع بندی سریع
- انواع ورودی فرم، تجربه کاربر را دقیق می کند.
- text برای نوشته آزاد است؛ number برای رقم.
- date و time انتخاب گر آماده می دهند.
- pattern و min/max ورودی را محدود می کنند.
- submit داده ها را می فرستد؛ reset تمیز می کند.
ادامه مسیر: المان های فرم، و ویژگی های فرم. برای جستجو، مقاله «انواع ورودی فرم» را هم در سایت ببین.