جلسه سوم تگ input
در جلسه های قبل با تگ های مختلفی آشنا شدیم. و تگ input را هم بررسی کردیم. اما این تگ موارد بسیار زیادی دارد که در این جلسه قصد داریم برخی از آن ها را اشاره کنیم.
یکی دیگر از مقدار هایی که می توان به ویژگی type این تگ داد ، color است. از این مقدار برای انتخاب رنگ توسط کاربر استفاده می شود. برای مثال از کاربر می خواهیم رنگ مورد علاقه خود را وارد کند.

<input type="color"/>

کاربر برای انتخاب رنگ می تواند از روش های مختلفی مانند انتخاب از میان رنگ های موجود در صفحه با ابزار نمونه گیر ، یا انتخاب از روی صفحه رنگی و تغییر نوع رنگ، وارد کردن مقادیر دقیق RGB که مخفف رنگ های قرمز ، سبز و آبی است. یا انتخاب در سیستم HSL و همچنین وارد کردن کد رنگ در سیستم hex استفاده کند.
ولی خروجی تمام این ها کد رنگ در سیستم HEX خواهد بود.

مقدار دیگری که ویژگی type میگیرد hidden است. شما با این کار می توانید یک مقدار را از چشم کاربر مخفی کنید ولی هنگام ارسال و ذخیره دیتا به آن دسترسی داشته باشید.
برای مثال فرض کنید میخواهید تاریخی را که کاربر فرم شما را پر می کند را به صورت خودکار ذخیره کنید اما نمیخواهید کاربر از آن مطلع شود. با این کار می توانید تاریخ یا هر دیتای دیگری را همراه سایر اطلاعاتی که کاربر به سمت شما می فرستد را داشته باشید.

<input type="hidden"/>

قابلیت دیگر تگ input نمایش عکس است. شما می توانید با مقدار image و ویژگی دیگری به نام src که آدرس تصویر است. یک تصویر را به کاربر نمایش دهید.

<input type="image" src="https://efaraj-thumbnail.s3.ir-thr-at1.arvanstorage.ir/pictures/html_100x69.jpg"/>

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

<input type="image" src="" alt="نوشته جایگزین"/>

مقدار دیگر برای ویژگی type انتخاب ماه و هفته می باشد. فرض کنید شما می خواهید از کاربر ماه تولدش را بگیرید. و یا می خواهید به کاربر امکان انتخاب یک هفته کامل به عنوان مرخصی را بدهید . برای این کار کافی است مقدار ویژگی type را به ترتیب برابر month و week قرار دهید.

<input type="month" />

<input type="week" />

مقدار بسیار مهم و کاربردی دیگر هنگامی است که از کاربر میخواهید رمز عبور خود را وارد نماید. برای حفظ امنیت کاربر و جلوگیری از دیده شدن رمز کاربر توسط افراد نزدیک ایشان می توانید از مقدار password برای type استفاده کنید. این کار باعث می شود به جای کاراکتر هایی که کاربر وارد می کند ستاره نمایش داده شود. ولی هنگامی که اطلاعات از کاربر گرفته می شود مقدار واقعی آن ها ذخیره خواهد شد.

<input type="password" />

اگر تمایل دارید کاربر به جای ورود یک داده دقیق یک مقدار حدودی را انتخاب کند می توانید از ویژگی range استفاده کنید. از این قابلیت برای جستجو ها و یا سایر مواردی که نیاز به مقدار دقیق نیست استفاده می کنند.

<input type="range"/>

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

<form>
	<input type="text"/>
</form>

مقدار دیگری که کاربرد دارد reset است. از این حالت برای پاک کردن فرم توسط کاربر استفاده می شود. فرض کنید کاربر باید فرمی را پر کند حال اگر بخواهد به هر دلیل فرم را از اول پر کند می توانید با قرار دادن این کلید تمام فرم را پاک کنید.
توجه داشته باشید که برای استفاده از این ویژگی باید از تگ form استفاده کنید.

<form>
	<input type="text"/>
	<input type="reset"/>
</form>

دکمه دیگری که باید در تگ form از آن استفاده کنید دکمه ارسال اطلاعات است. وقتی که کاربر شما فرم را کامل کرد حالا باید بتواند اطلاعات آن را برای شما ارسال کنید . برای این کار از ویژگی submit میتوانید استفاده کنید. برای تغییر مقدار نمایش داده شده روی دکمه می توانید از ویژگی value استفاده کنید.

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

گاهی نیاز دارید بعضی موارد فرم شما الزاما توسط کاربر پر شود. برای این کار می توانید از ویژگی required استفاده کنید. با این کار کاربر باید قبل از ارسال فرم حتما موارد خواسته شده را کامل کند.

<form>
	<input type="text" required />
	<input type="password"/>
	<input type="submit" value="ارسال"/>
</form>

همچنین اگر در جایی میخواهید از کاربر email خود را وارد کند می توانید از ویژگی email استفاده کنید. این کار باعث می شود که کاربر هر مقداری را به عنوان email وارد نکند. بلکه باید الگوی درست یک ایمیل را داشته باشد. توجه داشته باشید که این مقدار باعث نمیشود مقدار وارد شده لزوما صحیح باشد. بلکه فقط شکل ظاهری آن را بررسی می کند.

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

مانند ویژگی email شما می توانید از ویژگی url برای بررسی درستی آدرس اینترنتی که کاربر وارد می کند مطمئن شوید. که الگوی یک آدرس url استاندارد را داشته باشد.

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

همچنین اگر میخواهید تعداد کاراکتر های وارد شده توسط کاربر را مدیریت کنید می توانید از ویژگی minlength و maxlength استفاده کنید. که به ترتیب حداقل و حداکثر ورودی کاربری را مدیریت می کنند. توجه داشته باشید که کاربر نمی تواند بیشتر از حداکثر تعیین شده وارد کند.
فرض کنید از کاربر می خواهید کد پستی خود را وارد کند. و می دانید کد پستی باید حتما ۱۰ رقم باشد.
این ویژگی ها برای مقدار های نوشتاری صحیح است.

<form>
	<input type="text" minlength="10"  maxlength="10" />
	<input type="submit" value="ارسال"/>
</form>

<form>
	<input type="text" minlength="10"  maxlength="10" />
	<input type="submit" value="ارسال"/>
</form>

برای مقادیر عددی شما می توانید از حداقل و حداکثر مقداری استفاده کنید. برای مثال میخواهید تعداد کالای موجود در سبد خرید را مدیریت کنید که از ۲ کمتر نباشد و از ۱۰ بیشتر نباشد.

<form>
	<input type="number" min="2"  max="10" />
	<input type="submit" value="ارسال"/>
</form>

در حالت عددی اگر میخواهید گام های ورودی را انتخاب کنید می توانید از ویژگی step استفاده کنید. برای مثال مقدار ورودی گام های 0.1 باشد.

<form>
	<input type="number" min="2"  max="10" step="0.1" />
	<input type="submit" value="ارسال"/>
</form>

یک قابلیت صحت سنجی دیگر مربوط به انتخاب فایل از سمت کاربر است. شما می توانید با ویژگی accept نوع فایل انتخابی کاربر را محدود کنید که هر فایلی را انتخاب نکند.
مقادیر انتخابی باید موارد مثل زیر باشد

audio/*
video/*
image/*

<form>
	<input type="file" accept="image/jpg"/>
	<input type="submit" value="ارسال"/>
</form>

ویژگی آخری که در این جلسه به آن می پردازیم readonly است. از این ویژگی برای زمانی استفاده می شود که شما میخواهید یک مقدار را به کاربر نمایش دهید ولی نمیخواهید بتواند آن را تغییر دهد. برای مثال ایمیل کاربر را نمایش می دهید اما نمی خواهید بتواند آن را تغییر دهد.

<form>
	<input type="email" readonly value="test@test.com"/>
	<input type="submit" value="ارسال"/>
</form>