آموزش form در html2020-11-08
جلسه12: فرم های HTML: مقدمه ای بر form و input علی جان نثاری
مقدار آن را برابر با readonly قرار می دهیم ،اگر چه تغییر نمی کند ولی با ارسال فرم به سرور منتقل می شود. یکی از مشکلات دانشجویان و علاقمندان به یادگیری برنامه نویسی نداشتن اطلاعات کافی و دقیق از وضعیت بازار، تکنولوژی های جدید و منابع آموزشی مناسب است. سوالات و اشکالاتی که تنها یک مشاور فنی، باتجربه و آگاه در آن زمینه می تواند پاسخگو آن باشد. تیم آموزشی آتریا همیشه آماده بوده تا سوالات و اشکالات شما را برطرف نموده و مسیر یادگیری صحیح را پیش روی شما قرار دهد. شما می توانید از طریق فرم مقابل، درخواست مشاوره خود را ثبت کنید.
با اینحال، وقتی شما از متد GET استفاده میکنید، اطلاعات درون فرم شما در آدرس بار مرورگر شما نمایش داده میشود. معمولا ، دادههای درون فرم بعد از کلیک بر روی کلید ثبت به یک صفحه در سرور ما ارسال میشود. برای ارسال نهایی فرم به یک کنترل کننده فرم از عنصر یا کلید ثبت استفاده میکنیم. مثال – در کد های زیر ما دو فیلد تک خطی ایجاد کرده ایم که نام و نام خانوادگی را دریافت میکند. با استفاده از دکمه های رادیویی برای گزینه های متعدد، هربار می توان تنها یک گزینه را انتخاب کنید.
آموزش کار با صفات یا Attributes در HTML
عنصر Label برای کاربرانی که گذری صفحه وب سایت را نگاه میکنند خیلی خیلی کاربردی هست، چرا که فرم هایی که اطلاعات مورد نظرشان را در داخل input نمایش میدهند برای اینجور کاربران خیلی نامفهوم هست و باعث کاهش تجربه کاربری ما میشود. کنترل های ورودی متن تک خطی (Single-line text input controls) - این کنترل ها برای مواردی که فقط به یک خط از ورودی کاربر نیاز داریم، مانند جعبه های جستجو یا نام ها استفاده می شوند. همانطور که در دروس ابتدایی دوره گفته شده هر المانی که در صفحه قرار می گیرد به واسطه تگهای HTML ایجاد شده است. این مبحث بسیار کاربردی و مهم است چراکه در اغلب وب سایتها در صفحات تماس با ما، در بخش نظرات، ثبت نام و ورود، جستجو و… از فرمها استفاده میشود. الان اون MyName میشه نام اون اینپوت یا Input داخل فرم و در نهایت اون Sadegh هم میشه مقدارش که کاربر داخل فرم وارد کرده، پس همونطور که میبینید صفت method با مقدار Get داده های فرم رو در نوار آدرس مرورگر نشون میده.
- فرم بخشی از سند است که شامل کنترل هایی مانند فیلدهای متنی، فیلدهای رمز عبور، کادرهای انتخاب (چک باکس ها)، دکمه های رادیویی، دکمه ارسال، منوها و غیره می باشد. {
- همانطور که در تصویر مشاهده میکنید، کلید های رادیویی به این شکل نمایش داده میشود. |}{
- در مثال بالا فقط یه فرم ساده ایجاد کردیم، در این فرم هیچگونه کار خاصی انجام نمیشه، مثلا اگه بروی دکمه ارسال کلیک کنید هیچ اتفاق خاصی نمی افته و نباید انتظار داشته باشید داده ها ارسال بشن جایی. |}{
- یک فرم، داده ها را از بازدیدکننده سایت، دریافت می کند و سپس آن را به یک برنامه ی پشت صحنه (back-end)، مانند CGI، اسکریپت ASP یا اسکریپت PHP و غیره ارسال می نماید. |}
- مثال – در کد های زیر ما دو فیلد تک خطی ایجاد کرده ایم که نام و نام خانوادگی را دریافت میکند.
- اینها از لحاظ عملکردی متناسب با نوع ورودی متن هستند ، اما ممکن است به شکل دیگری طراحی شوند.
امیدواریم که از این آموزش لذت برده باشید و در آینده نیز در آموزش های بعدی همراه ما باشید. اکنون ما با ساخت یک فرم login به شما یاد می دهیم که چگونه یک فرم ایجاد کنید. فراموش نکنین که فرم ها هم قابلیت استایل دهی دارند و در آموزش های CSS نوید معدن نژاد عزیز به آنها پرداخته است. به صورت کلی متد HTTP پیشفرض فرم ها بر روی متد GET ست شده است. عملیات میتواند در یک صفحه جدید، در یک فریم جدید یا در همان صفحه ایجاد شود.
در بخش بعدی در مورد نحوه استفاده از iframe ها در صفحه وب را یاد می گیریم. امیدوارم در این بخش آموزش HTML , از ساخت فرم ها در HTML نهایت استفاده را برده باشید. انوع input هایی که بیشترین استفاده و کاربرد را دارند در بخش زیر توضیح دادیم. یک دوره مقدماتی و رایگان سئو که بسیار پربار و سرشار از تجربه مدرس و با کیفیت بالا تهیه شده تا بتوانید در زمان کمتری وب سایت را سئو کنید. اگر خاصیت Action درون صفحه ما وجود نداشته باشد، عملیات در همان صفحه فرم انجام میشود.
در این بخش قصد داریم نحوه ایجاد فرم ها در HTML را یاد بگیریم. اکنون می بینیم هر وقت اطلاعات را به آدرس مورد نظر ارسال می کنیم، پاسخی مشاهده نمی شود. مشکل این است که ما برای آن ها نامی انتخاب نکرده ایم و باید برای هر یک نامی انتخاب کنیم. Method دارای دو مقدار post و get است که در ادامه با آن آشنا شده و تفاوت آن را توضیح خواهیم داد. برای انتخاب یک گزینه از میان چندین گزینه از از دکمه های رادیویی استفاده می شود. خب دوستان به پایان آموزش کار با فرم ها یا Forms در HTML رسیدیم، امیدوارم که مشکل خاصی در این آموزش نداشته باشید و نهایت استفاده رو برده باشید.
آشنایی با تگ Form در HTML
زمانی که فرم شما برای اطلاعات محرمانه طراحی شده است از مقدار post استفاده کنید تا این اطلاعات در مرورگر نمایش داده نشود. با استفاده از فرمها میتوانید تعامل کاربر با وبسایت را افزایش دهید. به عنوان مثال، یک فرم جستجو به کاربر اجازه میدهد تا به راحتی مطالب مورد نظر خود را پیدا کند. درکل وظیفه این صفت در فرم ها مشخص کننده نوع متد HTTP ارسالی ( GET یا POST ) در هنگام ارسال اطلاعات به سرور می باشد. تگ form همونطور که از اسمشم مشخصه با استفاده از اون میتونیم یک یا چندین فرم رو در یک صفحه ی وب ایجاد کنیم. نوع "tel" دارای اعتبار پیش فرض مانند ایمیل نیست ، زیرا الگوی شماره تلفن در سراسر دنیا متفاوت است.
طبعا میتوانید تعداد آیتم های به نمایش در آمده را بر اساس نیاز خود، کم و زیاد کنید. Form-handler معمولاً یک فایل روی سرور با یک اسکریپت برای پردازش داده های ورودی است. عنصر یک عنصر را می توان به روش های مختلفی، بسته به ویژگی type، نمایش داد.
خاصیت Target مشخص میکند که هنگامی که ما بر روی کلید ثبت کلیک میکنیم عملیات چطور انجام شود. برای مثال در یک صفحه مثل "/mizfa_form.php" که در بخش سرور ما قرار دارد، میتواند این عمل را برای ما انجام دهد. در جدول زیر خاصیت های موجود در تگ form را با همدیگر بررسی میکنیم. در نظر داشته باشید که برای متصل شدن عنصر label به عنصر input حتما باید خاصیت Id در آنها، کاملا یکسان باشد. برای مثال در زیر نمونه هایی از عناصر ورودی را در جدولی برایتان آورده ایم. Mutlipart / form-data - این روش هنگامی مورده استفاده قرار می گیرد که شما می خواهید داده های باینری را به صورت فایل هایی مانند تصویر، فایل word و غیره بارگذاری کنید.
در مقاله های بعدی با دیگر عناصر موجود در فرم ها آشنا میشویم و جزء به جزء هر فرم را بررسی میکنیم. یک فرم جدید ایجاد کنید و از نوع POST آن را تعیین کنید و عملکرد آن در صفحه اصلی میزفا باشد. خاصیت Method در فرم ها متد HTML فرم را که میتواند از دو نوع Get و Post باشد، مشخص میکند. در ادامه میخواهیم با خاصیت Method که یکی از مهمترین خاصیت های ما در تگ Form هست آشنا شویم. برای اینکه پس از ثبت فرم، نتیجه در یک صفحه جدید ایجاد شود نیز باید از _blank استفاده کنید.
باعث می شود تا کاربر نتواند تغییری در متن وارد شده ایجاد کند. Self – بیان می کند که صفحه action در فریمی که فرم قرار دارد باز می شود. با ما در بهترین آموزشگاه طراحی سایت همراه باشید ، ما در کنار شما هستیم. مثال بالا دو دکمه دارای تایپ های submit و reset را نشان میدهد. در مثال بالا، تنها سه تا از انتخاب ها به نمایش در می آیند و برای دیدن سایر انتخاب ها لازم است که در بین آپشن ها اسکرول کنید.
شما می توانید از ویژگی enctype برای مشخص کردن نحوه کد گذاری داده های مرورگر، قبل از ارسال آن به سرور، استفاده کنید. کنترل چک باکس یا کادر انتخاب برای انتخاب چندین گزینه از میان کادرهای انتخاب داده شده می باشد. اگر از ظاهر فرم خود راضی نیستید برای زیباسازی آن باید به آن استایل دلخواه را بدهید.
عناصر قابل استفاده در تگ Form در HTML
اگر قصد دارید کاربران سایت خود را حفظ کنید و ارتباط شما با مخاطبان تان یکطرفه نباشد به اهمیت و کاربرد تگ form در html پی می برید. بنابراین نیاز است که اهمیت این موضوع را درک کنید و آنها را برای سایت خود پیاده سازی کنید. در صورتی که اطلاعات فرم محرمانه نیستند میتوانید ارسال فرم را با متد GET یعنی به کمک پارامترهایی در url انجام دهید در غیر اینصورت باید از متد post استفاده شود. برخلاف Get در صورت استفاده از مقدار Post دیگه اطلاعات ارسالی در نوار آدرس مرورگر نمایش داده نخواهد شد و از نظر امنیتی نیز این روش برای ارسال اطلاعات پیشنهاد میشود. عنصر"number" فیلد ورودی ایجاد می کند که به کاربر اجازه می دهد مقدار عددی را وارد کند.
بخش زیر از آموزش فرم ها در HTML درباره توضیحات انواع مختلف کنترل هایی که در فرم می توانید استفاده کنید را نشان می دهد. اکنون می پرسید چگونه نام پیشفرض دکمه submit و reset را تغیر دهیم؟ ما به وسیله صفت value این کار را هم می توانیم انجام دهیم. Input دارای صفت type است که در آن مقادیر متفاوتی می تواند قرار گیرد.
ذخیره نام، ایمیل و وبسایت من در مرورگر برای زمانی که دوباره دیدگاهی مینویسم. در ادامه شما با تمامی جنبههای کار با فرمها در HTML آشنا خواهید شد، از ساختار اولیه تا اعتبارسنجی دادهها. در checkbox کاربران میتوانند همزمان چند گزینه را انتخاب نمایند.
این المان به شما اجازه می دهد انواع مختلف فیلد های ورودی را بر اساس مقدار خصوصیت type ایجاد کنید. فرم ها در HTML برلی جمعاوری انواع اطلاعات ورودی کاربر مثل اطلاعات تماسی مانند نام, ایمیل, شماره تماس, یا جزییاتی مثا حساب بانکی برای پرداخت آنلاین و غیره ست. Value، صفت بعدی است که در تگ input قرار می گیرد و می توانید مقدار اولیه داخل فیلد را با آن تغیر دهید. در متد post علاوه بر ارسال اطلاعات بصورت مخفی، میتوان طول داده ها را بیشتر داد ولی در متد get محدودیت در طول داده ها وجود دارد. پس اگر نوع متد ارسال به صورت get بو د اطلاعات را در نوار آدرس می بینیم که مناسب فرم هایی که دارای پسورد می باشند نیست و استفاده از آن در این موارد توصیه نمی شود و امنیت را پایین می آورد. با target می توانید ارسال فرم را در صفحه جدید به کاربر نمایش دهید.
از نوع "color "برای تعریف یک قسمت ورودی استفاده می شود که حاوی یک رنگ است. به کاربر امکان می دهد رنگ را توسط رابط رنگ بصری در یک مرورگر مشخص کند. ازradio برای ایجاد دکمه های رادیویی تایید شونده در فرم های وب استفاده می شود. برای ایجاد دکمه های ساده به کار می رود، یک دکمه معمولی باید به همراه دستورات جاوا اسکریپت تکمیل شود در غیر این صورت به خودی خود کاربردی ندارد. نوع دیگری از دکمه ها ،دکمه reset هستند که برای پاک کردن اطلاعات فرم به کار می رود.
تگ form از عناصر مهم و بسیار کاربری HTML است که امروز قرار است در این آموزش با نحوه ی استفاده از آن آشنا شویم. در آموزش امروز به همراه مسترکد می آموزیم که چگونه فرم HTML بسازیم و با تگ form و سایر عناصر موجود برای ایجاد فرم ها در اچ تی ام ال کار کنیم. در دوره طراحی سایت آموختیم که فرمها یکی از مهمترین عناصر در ساخت صفحات وب تعاملی هستند. به کمک فرمها، کاربران میتوانند اطلاعاتی را به سرور ارسال کنند. این اطلاعات میتواند شامل هر چیزی از یک پیام ساده تا اطلاعات پیچیده برای ثبتنام در یک سرویس باشد. در این مطلب از بلاگ کندو شما با اصول اولیه ساخت و استفاده از فرمها در HTML به عنوان آموزش فرم ها در html آشنا خواهید شد.
تگ div در HTML
اگرچه این ورودی های خیلی شبیه به هم هستند اما ویژگی type به هرکدام از آنها معنا و مفهموم خاصی می دهد و تعریف می کند که هرکدام چه نوع محتوایی قرار است داشته باشد. به کمک آن می توان مشخص کرد که کاربر چه نوع محتوایی را درون ورودی باید قرار دهد. لطفا برای مشاهده خروجی مثال زیر بروی دکمه امتحان کنید کلیک نمایید و سپس در خروجی، ۲ عدد را به دلخواه انتخاب نمایید تا حاصل جمع آن به شما نمایش داده شود. این تگ یکی از تگ های محاسبه گر در فرم ها می باشد، یعنی همانطورم که از اسمش پیداست این عنصر میتواند نتیجه ی یک یا چند عمل را در خروجی به نمایش در بیاورد، و بطور کلی ما برای ایجاد خروجی مان از این عنصر استفاده مینماییم. در مرحله اول باید با استفاده از تگ Input و صفت list یک لیست را تعریف نماییم و سپس در مرحله ی دوم باید از تگ datalist و صفت id استفاده کرد و سپس نامی که در صفت list در مرحله ی اول ایجاد کردیم را در صفت id تگ datalist قرار دهیم.
پشتیبانی مرورگرها
حالا به سراغ مهمترین خصیصههایی که میتوان در یک فرم استفاده کرد، میرویم. ما انواع فرم داریم که شاید تا الان اسمشون رو شنیده باشید، مثلا فرم تماس با ما، فرم سفارش گیری ، فرم ثبت نام و ورود و هرنوع فرم دیگه که در ذهن شما باشه. تگ form از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند. در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید. از password برای ایجاد فیلدهای کلمه عبور (ستاره ای) استفاده می شود. شما با گذراندن دوره ها و دریافت مدرک معتبر، می توانید به سادگی وارد بازار کار شوید.ما همواره و حتی سال ها پس از پایان دوره دانشجویانمان، در کنار آنها هستیم و راهنمایی های لازم را به صورت رایگان انجام خواهیم داد.
این دو مشخصه مقادیر عددی را دریافت می کنند و برای تعیین اندازه ی فیلد مورد استفاده قرار می گیرند. Cols مقدار پهنای فیلد را کنترل می کند و rows مقدار ارتفاع آن را. برای این کار باید گروهی از این دکمه ها را بوجود آورد و همه آنها را با یک نام یکسان عضو این گروه کرد. به عنوان نمونه در مثال بالا ویژگی name همه دکمه های زیر را برابر با color یعنی وضعیت قرار می دهیم. همچنین می توانید یک چک باکس را به طور پیشفرض در حالت انتخاب قرار دهید. شاید به نظر برسد که توضیح مربوط به عنصر را می تواند توسط عناصر دیگر مثل پاراگراف نیز فراهم کرد اما باید بدانیم که عنصر از نظر معنایی مخصوص به همین کار می باشد.
عنصر از نوع "date" یک قسمت ورودی ایجاد می کند، که به کاربر اجازه می دهد تاریخ را در یک قالب معین وارد کند. کاربر می تواند تاریخ را با فیلد متن یا رابط انتخابگر تاریخ وارد کند. Label همانطور که از نامش هم مشخص است، لیبل هر فیلد را نشان میدهد. ولی اگر آن را با صفت for ترکیب کنید، در صورتی که کاربر روی لیبل کلیک کند، فیلدی که در صفت for تعیین کرده اید، به صورت اتوماتیک انتخاب خواهد شد. مقدار id فیلد مورد نظر را برای صفت for در لیبل مورد نظر قرار داده ایم تا با کلیک روی هر لیبل، فیلد مربوط به آن انتخاب شود.
چه زمانی از متد Post در فرم استفاده میکنیم؟
این فیلد بطور عادی به صورت یک باکس متنی به همراه دکمه ای که امکان انتخاب فایل را به کاربر می دهد, نمایش داده می شود. Input های متنی تک خطی با استفاده از تگ که دارای خصوصیت type با مقدار text هستند ایجاد می شود. یک عنصر input می تواند شامل فیلد متن, پسورد, چک باکس, دکمه radio , دکمه submit , دکمه ریست و .. و چندین نوع جدید که در HTML5 معرفی شده است و در بخش های بعدی به آن می پردازیم, است.
حال اگر به آدرس سایت توجه کنیم، نشان می دهد که متغیر username و password دارای چه محتوایی است و این امینت کار ما را پایین می آورد و پسورد می تواند هک شود. ما به وسیله label می توانیم متنی را در کنار input قرار دهیم که کابر بتواندتشخیص دهد که هر فیلد برای چه کاری است. نمونه بالا را که در Try it Yourself وب سایت W3Schools قرار دارد، اگر اجرا کنیم، متوجه میشویم که هیچ داده ای به صفحه ارسال نشده است. اگر فیلدی خاصیت name را نداشته باشد، دیتایی از آن عنصر ورودی به صفحه Action ما ارسال نمیشود. کنترل کننده فرم به طور کلی یک صفحه در سرور هستش که اسکریپت هایی برای پردازش اطلاعات یا داده های درون ورودی ها درونش وجود داره. کنترل های ورودی رمز عبور (Password input controls) - این کنترل نیز یک ورودی تک خطی است، اما به محض اینکه کاربر، کاراکتر را وارد کند، آن کاراکتر را ماسک می کند یا می پوشاند.
همینطور می توان این عنصر را با استفاده از ویژگی for با یک عنصر ورودی جفت کرد. توضیحات کامل کار با فرم ها یا Forms در html کد های بالا در ادمه آموزش . می توان توسط این مشخصه میزان پیشفرضی برای اطلاعات یک فرم تعریف کرد و برخی مشخصه های دیگر که بنا به کاربرد ذکر خواهد شد. توسط این مشخصه نوع فیلد را مشخص می کنیم که مثلا این فیلد به صورت متن قابل مشاهده باشد و یا به صورت رمزعبور یا دکمه ی رادیویی و …مقادیری که توسط این مشخصه دریافت می گردند . بدون شک تمام افرادی که وبگردی را تجربه کرده اند از فرم ها نیز استفاده کرده و با آن ها سر و کار دارند؛ از فرم ساده ای مثل جستجوی گوگل گرفته تا فرم های پیچیده ی ثبت نام در سایت ها و … .
در مثال بالا مشاهده می کنید که داخل کادرها یک متن کم رنگ مثل نام شما، ایمیل و پسورد نوشته شده است. اگر به مثال دقت کنید متوجه می شوید که این عبارات را با ویژگی placeholder ایجاد کرده ایم. از نوع "search" یک ورودی را ایجاد می کند که به کاربر اجازه می دهد جستجو را وارد کند. اینها از لحاظ عملکردی متناسب با نوع ورودی متن هستند ، اما ممکن است به شکل دیگری طراحی شوند. "month "قسمت ورودی ایجاد می کند که به کاربر امکان می دهد ماه و سال را به راحتی در قالب "MM ، YYYY" وارد کند که در آن MM مقدار ماه را تعریف می کند ، و YYYY مقدار سال را مشخص می کند.
کاربران معمولا یک فرم را با تغییر دادن کنترل ها مثل وارد کردن متن, انتخاب آیتم ها و غیره.. فرم را تکمیل و با سابمیت این فرم, اطلاعات را به سمت وب سرور برای پردازش ارسال می کند. اطلاعاتی که از طریق فرمها جمعآوری میشود، میتواند به سرور ارسال شود و در آنجا پردازش شود. به عنوان مثال، یک فرم تماس با ما میتواند اطلاعاتی را که کاربر وارد کرده است به یک آدرس ایمیل ارسال کند. نوع "email" یک فیلد ورودی ایجاد می کند که به کاربر اجازه می دهد تا آدرس ایمیل را با اعتبار سنجی الگوی وارد کند. ویژگی های متعدد به کاربر اجازه می دهد بیش از یک آدرس ایمیل وارد کند.
از این روش نمی توان برای اطلاعات طولانی یا کاراکتر های خاص استفاده کرد. همچنین بهتر است برای نام کاربری و کلمه عبور هم از این روش استفاده نشود چون در این صورت این اطلاعات در نوار آدرس مرورگر داده می شوند. فرم های HTML ابزاری قدرتمند برای جمع آوری اطلاعات، برقراری ارتباط با کاربران و ارائه خدمات به آنها هستند.
آموزش افزودن کدهای PHP سفارشی به المنتور - (بصورت دستی)
همچنین عنصر label باعث میشود تا شما در تگ Form برای کاربرانی که مشکلاتی برای انتخاب المان های کوچک مانند دکمه های رادیویی و چک باکس ها دارند، کار را راحت تر کنید. زیرا با توجه به تعریف شدن id با انتخاب کردن label توسط کاربران نیز میتوانند دکمه های رادیویی یا چک باکس ها را انتخاب کنند. اگر به html و css و به صورت کلی طراحی سایت علاقمند هستید ، پیشنهاد می کنیم که در کلاس آموزش طراحی سایت و یا کلاس آموزش html – css در آموزشگاه کامپیوتر پرتو شرکت نمایید. امیدوارم که از آموزش آموزش تگ form در html استفاده لازم را برده باشید. بطور کلی میشه گفت ما دو نمونه دکمه میتونیم داشته باشیم، یک نمونه دکمه هست که از نوع عناصر ورودی ( Input ) است و در درون فرم ها قرار میگیرند و با کلیک بروی آنها اطلاعات وارد شده در فرم به سرور ارسال می شود.
پس میشه گفت اصلی ترین و مهمترین بخش یک فرم ، همین صفت Action می باشد، یعنی اگه این صفت نباشه عملا هیچی به هیچیه و فرم نمیتونه هیچگونه عملیاتی انجام بده.
تگ Form در HTML
این ورودی یک کادر یک سطری برای ورود متن فراهم می کند برای ساختن این کادر باید به شناسه type تگ input مقدار text را بدهیم. Method get برای ارسال اطلاعات از آدرس صفحه استفاده نمی کند. خوب، در اینجا دیگر تقریبا با تمامی عناصری که برای ساختن یک فرم HTML به آنها نیاز خواهید داشت، آشنا شده اید.
{بازار کار وردپرس در ایران
|}همچنین می توانید با استفاده از ویژگی min و max مقدار حداقل و حداکثر را وارد کنید. نوعی دیگر از ابزارهایی که اطلاعاتی را از کاربران دریافت می کند check box ها هستند و بیشتر در مواردی که امکان انتخاب شدن یا نشدن برای یک گزینه وجود داشته باشد به کار می رود.برای ساختن آنها هم باید از تگ input استفاده کنیم. در روش method get اطلاعات از طریق آدرس صفحه ارسال می شود. به این صورت که اطلاعات وارد شده در فرم پس از یک علامت سوال و بعد از آدرس صفحه action قرار می گیرند و ارسال می شوند. عنصر همچنین به کاربرانی کمک می کند که در کلیک کردن بر روی مناطق بسیار کوچک (مانند دکمه های رادیویی یا چک باکس ها) مشکل دارند - زیرا وقتی کاربر روی متن موجود در عنصر کلیک می کند، دکمه رادیویی/چک باکس را تغییر می دهد.
دکمه ای را برای ارسال داده های فرم به یک کنترل کننده فرم (form-handler) تعریف می کند. عنصر برای کاربران صفحه خوان مفید است، زیرا وقتی کاربر روی عنصر ورودی تمرکز می کند، صفحه خوان برچسب را با صدای بلند می خواند. همچنین توجه داشته باشید که عرض پیش فرض یک فیلد ورودی 20 کاراکتر است. تمام عناصر مختلف فرم در فصل های بعدی آموزش طراحی سایت توسط موسسه آموزشی آتریا تحت عنوان (عناصر فرم HTML) پوشش داده شده است.
برای انتخاب تنها یک گزینه از میان چند گزینه باید همه دکمه های رادیویی هم نام باشند. بهتر است از برچسب در فرم استفاده کنید، زیراکد را برای تجزیه کننده، مرورگر و کاربر راحتر و آسان تر می سازد. برای جمع آوری اطلاعات موردنیاز از بازدید کنندگان سایت، فرم ها ضروری هستند..
در غیر این صورت یک فرم html تنها یک نمای ظاهری است که به تنهایی قادر به انجام کاری نخواهد بود. در آینده در رابطه با دریافت اطلاعات از فرم از طریق php و پردازش آن نیز صحبت خواهیم کرد. Inputها میتوانند فیلدهایی از نوع ورودی متنی باشند، چک لیست باشند یا دکمهی ارسال فرم را ایجاد کنند. مشخص نکردن name برای یک عنصر میتواند منجر به عدم ارسال اطلاعات این عنصر به صفحه ی action فرم و ناقص شدن اطلاعات دریافتی شود. بنابراین نسبت دادم نام به عناصری که در فرمتان قرار خواهید داد را فراموش نکنید.
{آموزش ویژگی border-radius در css
|}به طور کلی بدر نظر داشته باشید که عرض پیشفرض برای فرم ها به اندازه ۲۰ حرف انگلیسی هست. تمامی حقوق و مطالب سایت برای وبسافت۳ محفوظ می باشد و کپی برداری از مطالب رایگان باذکر منبع آزاد است. کافیه از این صفت در هریک از Input هامون استفاده کنیم و یه نام دلخواه براشون مشخص کنیم، هر نامی که دوست داشتید میتونید مشخص کنید، ولی سعی کنید نام هاتون منحصربفرد باشه. مثلا اگه برای یه اینپوت نام test مشخص کردید برای اینپوت دیگه باید نام متفاوت باشه.
فرم ها در صفحات وب دارای یک صفت بنام action می باشند، که وظیفه این صفت ارسال اطلاعات وارد شده توسط کاربر به سمت سرور می باشد، یعنی کاربر اطلاعاتش رو وارد میکنه و سپس با زدن دکمه ثبت این اطلاعات به سرور سایت مورد نظر ارسال میشه. برای ارسال اطلاعات وارد شده در فرم به صفحه action استفاده می شود.برای ساختن این دکمه باید در تگ input مقدار شناسه type را برابر با submit قرار دهیم. در طراحی یک وب سایت بسته به نیاز برنامه نیاز است تا داده هایی را از کاربران دریافت کنیم. برای این منظور در طراحی سایت از فرم های HTML استفاده می کنیم.
{آموزش ویژگی column-span در CSS
|}اگر در ایجاد فرم خود مشکل یا سوالی داشتید در بخش نظرات سایت مطرح نمایید. با این خصوصیت مشخص می کنیم که چه نوع اطلاعاتی را قرار است دریافت کنیم. با این خصوصیت می توانید مقادیری مانند متن، ایمیل، رمز، دکمه رادیویی، چک باکس و … ایجاد کنید و اطلاعات مورد نظر را از کاربر دریافت کنید.
استفاده از مقدار checked در خط دوم ورودی درج شده در کد بالا، نشان میدهد که این انتخاب، از پیش تیک خورده و به صورت پیشفرض انتخاب شده است. ویژگی for تگ باید برابر با ویژگی id عنصر باشد تا آنها را به یکدیگر متصل کند. انواع مختلفی از کنترل های فرم وجود دارند که می توانید برای جمع آوری داده با استفاده از فرم از آنها استفاده کنید. همینطور می توان با استفاده از ویژگی multiple امکان اینکه کاربر بتواند چند مورد را انتخاب کند فراهم کرد. می توان به کمک ویژگی selected مقدار پیشفرضی برای این لیست مشخص کرد. بصورت پیشفرض یک checkbox در حالت تیک نخورده می باشد اما می توان با استفاده از ویژگی checked حالت اولیه این عنصر را بصورت تیک خورده قرار داد.
خاصیت Action به معنی عملکردی است که فرم بعد از کلیک بر روی کلید ثبت باید انجام دهد. کنترل کننده های فرم توسط خاصیت Action در فرم ها مشخص میشوند. همانطور که در تصویر مشاهده میکنید، کلید های رادیویی به این شکل نمایش داده میشود. اگر یادتون باشه در مثال بخش قبل از عنصری به نام Label استفاده کردیم. عنصر Label همانطور که از نامش پیداست برای قرار دادن نام یا لیبل در فرم های ما استفاده میشود. در رابطه با input ها شما در مقاله آشنایی با input ها بیشتر آشنا خواهید شد ولی قبلش بیایم کمی بیشتر با عناصر هر فرم آشنا بشیم.
متنی را که به صورت پیش فرض در آن نمایش داده میشود ،مشخص می کند. از شناسه name برای تعریف کردن یک نام منحصر به فرد برای فرم استفاده می شود. طبعا با اضافه کردن استایل های مورد نیاز و به کار گیری آن در محیط rtl میتوانید شکل و شمایل آن را با نیازهای خود تطبیق داده و نمایی زیبا به آن ببخشید.
انواع مختلفی از کنترل های فرم وجود دارد که می توانید از آنها برای جمع آوری داده های فرم HTML استفاده کنید. Application / x--urlencoded - این روش استانداردی است که اکثر فرمها در سناریوهای ساده از آن استفاده می کنند. مشخص می کند که از کدام متد HTTP (GET یا POST) برای ارسال داده ها استفاده شود. برای کمک به سایت ما و گسترش آموزش در بین هموطنان، در سایتها، وبلاگ ها و شبکه های اجتماعی لینک سایت ما را درج کنید. سایر خصیصههای فرم که شامل name و کلاس بودند در ابتدای درس با آنها آشنا شدید. در جلسه بعدی دربارهی Inputها جزییات بیشتری را ارائه میدهیم و ساخت فرم را تکمیل خواهیم کرد.
چک باکس ها به کاربران اجازه انتخاب چندین گزینه از بین آپشن های از پیش تعریف شده را می دهد. این دکمه با تگ و خصوصیت type و مقدار checkbox برای آن ساخته می شود. یکی از جذاب ترین موضوعات در طراحی صفحات وب، کار با فرم ها می باشد. خیلی اوقات در سایت ها نیاز داریم که اطلاعات کاربران را دریافت کنیم مثلاً برای نظرسنجی و ثبت نام از کاربران و یا ایجاد فرم تماس برای ارتباط کاربر با مدیر سایت. تگ form در html یکی از مهمترین مباحثی است که هر برنامه نویسی باید با آن آشنا باشد. برای ایجاد تعامل با کاربران، ایجاد فرم یکی از بهترین راهکارها به شمار می رود.
در ادامه آموزش فرم ها در html، به بررسی عناصر اصلی فرم میپردازیم. بصورت پیش فرض اگه از این متد استفاده نکنیم، فرم خودش خودکار متد GET رو انتخاب میکنه. این ابزار شبیه checkbox است و برای انتخاب گزینه ها به کار می رود با این تفاوت که از بین گزینه های موجود تنها یکی را می توانیم انتخاب کنیم .
در صورتی که بخواهیم یک گزینه را به دلخواه خودمان از لیست بصورت پیش فرض انتخاب نماییم باید از مقدار selected درون گزینه ی مورد نظرمان استفاده نماییم. ما همیشه در تلاشیم که بهترین آموزش ها, مقالات تخصصی، سورس کد, قالب ها و اپلیکیشن های وب و موبایل را تولید و در اختیار علاقه مندان و حرفه ای های این حوزه ها قرار بدیم. یک دکمه ریسیت (reset) نیز تمام مقادیر وارد شده توسط کاربر در فرم را به مقدار اولیه باز می گرداند. یک دکمه سابمیت (submit) برای ارسال داده های فرم به وب سرور استفاده می شود. از متد POST همیشه زمانی استفاده کنید که اطلاعات درون فرم شما خیلی محرمانه یا خصوصی هست.
اگر روی تگ label کلیک کنید، روی کنترل مربوط به متن متمرکز خواهد شد. برای انجام این کار، باید صفت for در تگ label قرار گیرد و مقدار آن برابر با صفت id در تگ input باشد. برای اینکه یک مقدار پیشفرض (برای راهنمای کاربر) در باکس خود ایجاد کنیم از خاصیت placeholder استفاده می کنیم.
در این نوشته به توضیح و آموزش تگ form در html5 می پردازیم و مراحل ایجاد فرم را به صورت قدم به قدم شرح خواهیم داد. مسترکد با ارائه انواع آموزش در زمینه های متنوع از قبیل آموزش و ترفند های وردپرس، آموزش و ترفند های جوملا، معرفی افزونه ها و آموزش کارکرد آنها، راه حل های عیب یابی، آموزش HTML و CSS، راهنمای استفاده از جی کوئری و ... سعی دارد کاربران را به سمتی سوق دهد که خودشان بتوانند کلیه ی نیازهای خود را در زمینه طراحی یک سایت و نگهداری از آن برطرف کنند. مهمترین عنصر فرم، المنت input است که بسته به فیلدی که می خواهید داشته باشید، می تواند انواع مختلفی از جمله فیلد متنی، چک باکس ها، رمزعبور، دکمه های رادیویی، دکمه ارسال و … باشد.
یعنی داریم میگیم که داده های فرم پس از کلیک بروی دکمه ارسال به سمت سرور و به فایل get_data.php ارسال بشه، اینجا دیگه فرم وظیفه شو بخوبی انجام داد دمش گرم. سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. عنصر از نوع "datetime-local" زمینه ورودی را ایجاد می کند که به کاربر اجازه می دهد تاریخ و همچنین ساعت محلی را در ساعت و دقیقه و بدون اطلاعات منطقه زمانی انتخاب کند. از این مقادیر به همراه تگ input برای ایجاد باکس های قابل تایید (چک باکس) استفاده می شود.
{آموزش نحوه قرار دادن فایل های صوتی در HTML
|}که ان شاالله در جلسه بعدی با تگ های مخصوص فرم و در جلسه بعدش با صفت های مخصوص فرم آشنا خواهید شد، در این جلسه فقط نگاه کلی داریم به فرم ها و نحوه ایجادش. نحوه استفاده از آن مانند submit است.هرگاه که روی این دکمه کلیک کنیم ،کل نوشته های فرم پاک می شود. شناسه بعد از check box می باشد این شناسه باعث می شود تا در هنگام باز شدن صفحه این دکمه ها به صورت انتخاب شده نمایش داده شوند. اگر بخواهیم تعدادی radio button مرتبط به هم بسازیم به طوری که تنها امکان انتخاب یکی از آنها باشد ،باید برای همه آنها یک نام در نظر بگیریم ،اما مقدار value های مختلف بدهیم.
آموزش html css