درخواست های ارتباط
جستجو
لیست دوستان من
صندوق پیام
همه را دیدم
  • در حال دریافت لیست پیام ها
صندوق پیام
رویدادها
همه را دیدم
  • در حال دریافت لیست رویدادها
همه رویدادهای من
تخفیف های وب سایت
همه تخفیف ها

عضویت در

کانال تلگرام

توسینسو

اطلاعات مطلب
مدرس/نویسنده
پارسا صفوی
امتیاز: 17244
رتبه:34
20
30
10
138
طراح و برنامه نویس وب و ویندوز با استفاده از C# و ASP.NET MVC پروفایل کاربر

طراحی وب سایت با کمک HTML و CSS - بخش نهم :: فرم ها و جداول

تاریخ 45 ماه قبل
نظرات 0
بازدیدها 807
سللام به همه ی دوستان itpro و عرض پوزش به دلیل تاخیر دو روزه
ما در جلسه ی قبل با Background ها ، عکس ها و لیست ها آشنا شدیم که مباحث مهمی در طراحی وبسایت هستند. امروز می خواهیم با هم کار بار فرم های HTML را یاد بگیریم.

فرم های HTML


اگر مقداری به سایت ITPRO دقت کنید میبینید که پر از فرم های مختلف است مثلا فرم ثبت نام و ورود یا فرم نوشتن مطلب و نظر . این فرم ها در حقیقت ابزاری برای گرفتن اطلاعات از کاربر هستند که به برنامه نویس های تحت وب کمک می کنند که اطلاعات را از کاربر بگیرند و از آن ها استفاده کنند. من برای شروع فولدر Project11 را می سازم و فایل index.html را که دارای کد های اولیه ی وبسایت است درون آن قرار می دهم. سپس با استفاده از تگ فرم یک فرم خالی درون آن ایجاد می کنم:
<!DOCTYPE html>
	<html>
	<head>
		<title>ITPRO</title>
		<style>
			body{
				direction:rtl;
			}
		</style>
	</head>
	<body>
		<form>
			
		</form>
	</body>
	</html>
خروجی :
forms

ورودی های متنی

دیدیم که چیزی در صفحه نمایش داده نشد. که منطقی است چون فرم ما خالی است. حالا می خواهیم یک ورودی برای نام کاربری از کاربر بگیریم:
<form>
    <input type="text"/>
</form>
من با استفاده از تگ input یک ورودی تعیین می کنم و با استفاده از Type که یک Attribute است نوع مقداری که قبول می کند را از نوع متن می گذارم.
forms

دیدیم که می شود در ورودی تایپ کرد.

ورودی ایمیل

ما می توانیم ورودی های متنی را فقط به شکل x@y.z تایید کنیم تا کاربر فقط بتواند ایمیل وارد کند:
<input type="email"/>

ورودی های تاریخ

همچنین می توان ورود هایی از نوع تاریخ درست کرد :
<input type="date"/>
ما با استفاده از دادن مقدار Date به Type نوع ورودی را از نوع تاریخ مشخص می کنیم:
خروجی:
forms

اگر بر روی پیکان سمت راست کلیک کنید میبینید که یک تقویم برای انتخاب تاریخ برای مقدار ورودی باز می شود.

ورودی های Password

توی وبسایت های مختلف احتمالا به ورودی هایی بر خوردید که مقدار ورودی را ستاره نمایش می دهند(معمولا برای رمز عبور). ما با استفاده از گذاشتن نوع ورودی روی حالت Password می توانیم این کار را بکنیم:
خروجی:
forms

ورودی های عددی

ما می توانیم در ورودی ها فقط اعداد را قبول کنیم:
<input type="number"/>
ما برای گرفتن اعداد مقدار Type را برابر number قرار می دهیم.
خروجی:
forms

ورودی های جستجو

ما می توانیم مقدار Type را برابر Search قرار دهیم . این ورودی فرق زیادی با ورودی متنی نمی کند فقط دکمه ای در کنار ورودی می آورد تا با زدن آن مقدار ورودی را خالی کرد:
<input type="search"/>
خروجی:
forms

Textarea

در ورودی های متنی که پیش تر با آن ها آشنا شدیم ما می توانستیم در یک خط متن های کوتاهی تایپ کنیم . اما برای متن هایی با حجم زیاد مانند نوشتن مطالب در سایت itpro ورودی های متنی کافی نیستند و ما باید از Textarea استفاده کنیم:
<form>
    <textarea></textarea>
</form>
توجه داشته باشید که همه ی ورودی ها از تگ input استفاده نمی کنند.
خروجی:
forms

منو های انتخابی (Select menu)

با استفاده از Select menu شما می توانید لیستی از داده ها را برای کاربر قرار دهید تا کاربر بتواند از میان آن ها انتخاب کند:
<form>
			<select>
				<option>کرچ</option>
				<option>شیراز</option>
				<option>یاسوج</option>
				<option>کرمان</option>
				<option>تهران</option>
			</select>
		</form>
ما با استفاده از تگ Slect یک منوی انتخابی (Select menu) تعریف می کنیم و سپس با استفاده از تگ Option برای آن گزینه تعریف می کنیم.
خروجی:
forms

Value

ما در ورودی های بالا می توانستیم ورودی را از کاربر بگیریم اما نمی توانستیم در لود صفحه مقدار اولیه ای به ورودی ها بدهیم. ما با استفاده از Value که یک Attribute است می توانیم این کار را انجام دهیم:
<input type="text" value="پارسا"/>
خروجی:
forms

دیدیم که قبل از این که کاربر هیچ مقداری وارد کند مقدار" پارسا " درون ورودی وجود داشت.

Placeholder

با استفاده از این Attribute می توانیم توضیحی درون ورودی های متنی ، ایمیلی ، پسورد و Textarea ها بنویسیم بی آن که جز مقدار آن حساب شود و که این متن ها با انتخاب آن ورودی توسط کاربر پاک می شوند.
<input type="text" placeholder="نام خود را وارد کنید."/>
خروجی:
forms

حالا اگر من روی ورودی کلیک کنم و متن خودم را بنویسم متن Placeholder پاک می شود.
forms

دیدیم که متن قبلی پاک شد.

Check Box ها

ما می توانیم از Check list ها در فرم های HTML استفاده کنیم و با استفاده از Value مقدار آن را مشخص کنیم سپس جلو آن ها متنی برای نمایش به کاربر بنویسیم:
<input type="checkbox" value="مورد اول">مورد اول
<input type="checkbox" value="مورد دوم">مورد دوم
خروجی:
forms

Radio Button

Radio Button ها برای درج گزینه استفاده می شوند و تنها یکی از آن ها قابل انتخاب است:
<input type="radio" value="دانشجو">دانشجو
<input type="radio" value="شاغل">شاغل
خروجی:
forms

گزینه ها اضافه شدند اما مشکلی دیده می شود هر دو گزینه قابلیت انتخاب دارند! برای جلو گیری از این کار ما از یک Attribute به نام Name استفاده می کنیم. وقتی به دو ورودی این Attribute را بدهیم و مقدار آن ها را برابر قرار دهیم تنها یکی از آن ها قابل اجرا خواهند بود:
<input type="radio" value="دانشجو" name="job">دانشجو
<input type="radio" value="شاغل" name="job">شاغل

File Input

ما برای دریافت فایل از کاربر باید از این Input استفاده کنیم:
<input type="file"/>
خروجی:
forms

می بینید که عکس قابل Brows کردن است.

ارسال فرم Submit

شما برای ارسال فرم باید از این Input ستفاده کنید. البته برای دسترسی به فرم های ارسال شده نیاز است که شما با برنامه نویسی تحت وب آشنایی داشته باشید.
نحوه ی درست کردن دکمه ی ارسال:
<input type="text" placeholder="نام کاربری:"/>
<input type="password" placeholder="رمز عبور:"/>
<input type="submit" value="ارسال"/>
شما می توانید برای نوشتن یک عنوان برای ورودی ها از تگ Label استفاده کنید. برای استفاده ی اصولی تر از این تگ شما باید به هر یک از ورودی ها Name Attribute را بدهید و سپس در for Attribute که برای Label است مقدار آن را بنویسید:
<label for="username">نام کاربری:</label>
<input type="text" placeholder="نام کاربری:" name="username"/>
<label for="password">رمز عبور:	</label>
<input type="password" placeholder="رمز عبور:" name="password"/>
<input type="submit" value="ارسال"/>
خروجی:
forms

می بینیم که دکمه ی ما ایجاد شده است .

Required

ما با استفاده از نوشتن این کلمه کنار Attribute های دیگر مشخص می کنیم که ورودی مشخص شده حتما باید وارد شود و در غیر این صورت فرم ارسال نمی شود:
<label for="username">نام کاربری:</label>
<input type="text" placeholder="نام کاربری:" name="username" required/>
<label for="password">رمز عبور:	</label>
<input type="password" placeholder="رمز عبور:" name="password" required/>
<input type="submit" value="ارسال"/>
خروجی در زمانی که ورودی ها خالی هستند و دکمه ی ارسال زده شده:
در زمان کلیک روی دکمه ی ارسال ایمیل ها ، اعداد ،ورودی های اجباری چک و در صورت درست بودن ارسال می شوند.

جداول


برای یادگیری کار با جداول به "آموزش کار با جداول" نوشته ی استاد خانلری مراجعه کنید.

ممنون از همراهی شما دوستان !
ITPRO باشید.
محمد پارسا صفوی
انجمن تخصصی فناوری اطلاعات ایران - tosinso.com
برچسب ها
ردیف عنوان
1 طراحی وب سایت با کمک HTML و CSS - بخش اول :: مقدمه
2 طراحی وب سایت با کمک HTML و CSS - بخش دوم:: Style ها و متن ها
3 طراحی وب سایت با کمک HTML و CSS - بخش سوم::لینک ها و Css property ها
4 طراحی وب سایت با کمک HTML و CSS - بخش چهارم :: تگ های ساختاری و CSS Selector های پیشرفته
5 طراحی وب سایت با کمک HTML و CSS - بخش پنجم :: Box Model
6 طراحی وب سایت با کمک HTML و CSS - بخش ششم :: Float ها
7 طراحی وب سایت با کمک HTML و CSS - بخش هفتم :: Position ها
8 طراحی وب سایت با کمک HTML و CSS - بخش هشتم :: لیست ها ، Background ها و عکس ها
9 طراحی وب سایت با کمک HTML و CSS - بخش نهم :: فرم ها و جداول
10 طراحی وب سایت با کمک HTML و CSS - بخش دهم :: کد نویسی اصولی و Transition ها
11 طراحی وب سایت با کمک HTML و CSS - بخش یازدهم :: Animation ها
12 طراحی وب سایت با کمک HTML و CSS - بخش دوازدهم (پایانی) :: طراحی واکنشگرا و IFrame ها
دوره مجموعه کل دوره
مطالب مرتبط

در حال دریافت اطلاعات

نظرات
هیچ نظری ارسال نشده است

    برای ارسال نظر ابتدا به سایت وارد شوید