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

سللام به همه ی دوستان 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

#آموزش_طراحی_وبسایت_با_html #آموزش_طراحی_وبسایت #فرم_های_html #طراحی_صفحات_وب_با_html_,_css #طراحی_وبسایت_با_html_و_css #آموزش_طراحی_وبسایت_با_css #آموزش_کار_با_فرم_ها
عنوان
1 آموزش طراحی سایت با HTML و CSS قسمت 1 : مقدمه رایگان
2 آموزش طراحی سایت با HTML و CSS قسمت 2 : Style ها و متن ها رایگان
3 آموزش طراحی سایت با HTML و CSS قسمت 3 : لینک ها و CSS Property رایگان
4 آموزش طراحی سایت با HTML و CSS قسمت 4 : تگ های ساختاری و Selector رایگان
5 آموزش طراحی سایت با HTML و CSS قسمت 5 : Box Model رایگان
6 آموزش طراحی سایت با HTML و CSS قسمت 6 : Flaot ها رایگان
7 آموزش طراحی سایت با HTML و CSS قسمت 7 : Position ها رایگان
8 آموزش طراحی سایت با HTML و CSS قسمت 8 : لیست ، Background و عکس رایگان
9 طراحی وب سایت با کمک HTML و CSS - بخش نهم :: فرم ها و جداول رایگان
10 آموزش طراحی سایت با HTML و CSS قسمت 10 : کد نویسی اصولی رایگان
11 آموزش طراحی سایت با HTML و CSS قسمت 11 : انیمیشن ها رایگان
12 آموزش طراحی سایت با HTML و CSS قسمت 12 : طراحی واکنشگرا رایگان
زمان و قیمت کل 0″ 0
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....