در این قسمت از فیلم آموزشی ساخت فرم ثبت نام آموزش داده شده است ، شما می توانید این فیلم آموزشی را از انتهای پست دانلود کنید . قبل از خواندن آموزش پیشنهاد می کنیم جلسه قبل رو مرور کنید .
در قسمت اول فیلم ساخت فرم ثبت نام ، فیلد های زیر را آموزش داده ایم :
Search
Tel
Url
Number
Range
Color
Time
Date
این ها را می توانید در این فیلم آموزشی ساخت فرم ثبت نام مشاهده بفرمایید :
در قسمت دوم ساخت فرم ثبت نام با شناسه ها زیر آشنا خواهید شد و آن را می توانید از انتهای آموزش دانلود کنید :
Required :
وقتی از این شناسه در یک فیلد استفاده می کنید ، کاربر باید اون فیلد رو پر بکنه وگرنه به مرورگر اررور می دهد .
Multiple :
اگر از این شناسه در فیلد های فایل و ایمیل استفاده کنید ، کاربر می تواند بیش تر از یک فایل ارسال کند و یا بیش تر از یک ایمیل بفرستد .
Placeholder :
این شناسه برای راهنمایی کاربر استفاده می شود ، و مقداری که داخل اون می نویسید داخل فیلد به صورت کم رنگ به کاربر نمایش داده می شود و با وارد کردن یک مقداری در آن فیلد ، مقداری که برای placeholder وارد کرده بودید ناپدید می شود .
disabled :
از این شناسه برای غیر فعال کردن فیلد استفاده می شود .
Pattern :
با استفاده از این شناسه می توانید یک الگویی برای فایل مثلاً Text درست کنید ، و اگر کاربر بر اساس آن الگو فیلد را پر نکرد مرورگر به کاربر پیغام ارور می دهد .
<html> <head> <title>Web30ty</title> </head> <body dir="rtl"> <form action="#" method="get" > <fieldset align="center" > <legend><h2>فرم ثبت نام</h2></legend> <label>نام</label> <input type="text" name="username" required disabled /> <br/> <br/> <label>ایمیل</label> <input type="email" name="email" multiple placeholder="example@gmail.com"/> <br/> <br/> <label>متن</label> <input type="url" name="url" readonly value="http://Web30ty.com"/> <br/> <br/> <label>تلفن</label> <input type="tel" name="tel" pattern="\d{3}-\d{8}" /> <br> <br> <div align="center"> <input type="submit" value="ارسال" /> <input type="reset" value="بازنشانی" /> <input type="button" value="دکمه" /> </div> </fieldset> </form> </body> </html>
سلام خسته نباشید / من توی unsumbit فرم نوشتم return validating() و برای این تابع توی جاوااسکریپت نوشتم اگه فیلد نام خالی بود return false کن و الرت بده که نام را وارد کنید ولی بازم اطلاعات ارسال میشدن ؟
سلام
زیاد متوجه گفته شما نشدم . ولی اگه میخواید کاربر فیلد رو خالی نزاره کافیه که از شناسه required تو input استفاده بکنید تا اگر کاربر فیلد رو خالی گذاشت فرم ارسال نشه و به کاربر اعلام کنه .
مرسی بابت راهنمایت ، کارت درسته
سلام خسته نباشید،
زمانی که از تگ استفاده میکنیم کادر که باید داخلش چیزی نوشته بشه مستقیما جلوی نوشته ظاهر میشه ، نوشته رو توسط خصوصیت align راست پین کردم ولی با چه خصوصیتی باید این کادر ها رو از سمت چپ مرتب کرد؟
سلام منظورتون رو خوب متوجه نشدم ، اگه میشه کد رو بفرستین .
ولی اگر منظورتون این هست که کادر ها در سمت چپ نمایش داده شوند باید برای همون کادر ها از خاصیت align:left استفاده کنید تا به سمت چپ بروند .
ببخشید درست توضیح ندادم. زمانی که از تگ input استفاده می کنیم، باکسی که نمایش داده میشه رو چطور باید مکانش رو مدیریت کرد.
مرسی از جوابت 🙂
برای این کار بهتون توصیه می کنم از CSS استفاده کنید و با استفاده از خاصیت position در CSS می تونید به راحتی این کار ها رو انجام بدید . چون در HTML5 دیگه خاصیت align در input ساپورت نمیشه به همین خاطر از CSS استفاده کنید بهتره .
مثلاً برای چپ چین کردن می تونید از این کد در CSS استفاده کنید :
اگر خواستین می تونید از این لینک نحوه استفاده از position رو یادبگیرید :
https://web30ty.com/position-%D8%AA%D8%B9%DB%8C%DB%8C%D9%86-%D9%85%D9%88%D9%82%D8%B9%DB%8C%D8%AA-%D8%AE%D8%A7%D8%B5%DB%8C%D8%AA-z-index/