وب می داند که گاهی کاربر نیاز دارد تا ورودی ها و اطلاعات خود را برای وب سایت فراهم آورد. به عنوان نمونه:
- ثبت نام و ورود به وب سایت
- وارد کردن اطلاعات شخصی مثل نام، نام کاربری، رمزعبور و ایمیل
- جستجو در محتوا
- بارگذاری یک فایل
- و …
برای برطرف کردن این نیازها HTML موارد زیر را فراهم کرده است:
- text input
- radio button
- checkboxe
- dropdown
- upload widget
- submit button
تگ های مختلفی برای این کنترل ها وجود دارد اما بیشتر آنها از تگ <input>
استفاده می کنند و از آنجایی که تگ <input>
از آن دسته از تگ هایی است که فقط تگ آغازین دارند برای معرفی کنترل های مختلف از attribute یا همان ویژگی type
استفاده می شود:
<!-- text input -->
<input type="text">
<!-- checkbox -->
<input type="checkbox">
<!-- radio button -->
<input type="radio">
خروجی:
عنصر Form
عنصر <Form>
یک عنصر بلاک است که یک قسمت تعاملی را برای کاربر در صفحه فراهم می کند در نتیجه عناصر کنترل فرمی که در بالا مثال زده شد در این عنصر قرار می گیرند. (البته گاهی می توان بدون عنصر Form از این عناصر نیز استفاده کرد)
برای عنصر <Form>
دو ویژگی همیشه لازم است:
action
این ویژگی آدرسی که فرم به آن ارسال می شود را مشخص می کند.method
از این ویژگی برای مشحص کردن روش ارسال اطلاعات فرم استفاده می شود.
معمولا اطلاعات یک فرم به سرور ارسال می شوند. بررسی نحوه این کار و اتفاق هایی که در سرور می افتد در این آموزش نمی گنجد.
فرم را بصورت یک مجموعه ای از کنترل ها ببینید که قرار است یک عمل خاص را انجام دهد. مثلا اگر می خواهیم در یک سایت Login کنیم، فرم مربوط به آن می تواند دارای سه کنترل زیر باشد:
- ورودی ایمیل:
<input type="email">
- ورودی رمزعبور:
<input type="password">
- دکمه تایید و ارسال:
<input type="submit">
این سه عنصر می توانند بصورت زیر درون یک عنصر فرم قرار بگیرند:
<form action="/login" method="POST">
<input type="email">
<input type="password">
<input type="submit">
</form>
نمونه یک فرم ورود به سایت:
ورودی های متنی
تقریبا تمام فرم ها ورودی متنی از کاربر می خواهند تا بتوانند اطلاعاتی مثل نام، ایمیل، رمزعبور و آدرس و اطلاعات دیگری را از آنها دریافت کنند.
کنترل های متنی فرم در انواع مختلف با هدف های متفاوت در HTML وجود دارند:
متن | <input type="text"> |
انواع کاراکترها را می پذیرد | |
---|---|---|---|
ایمیل | <input type="email"> |
اگر یک ایمیل نامعتبر وارد کنیم اخطاری نمایش می دهد | |
رمزعبور | <input type="password"> |
نقطه بجای کاراکتر نشان می دهد | |
عدد | <input type="number"> |
می توان از دکمه های جهت بالا و پایین استفاده کرد | |
شماره تلفت | <input type="tel"> |
می تواند یک کامل کننده خودکار داشته باشد | |
متن چند خطی | <textarea></textarea> |
اندازه اش قابل تغییر است |
اگرچه این ورودی های خیلی شبیه به هم هستند اما ویژگی type
به هرکدام از آنها معنا و مفهموم خاصی می دهد و تعریف می کند که هرکدام چه نوع محتوایی قرار است داشته باشد.
Placeholder
از ویژگی placeholder
برای راهنمایی کاربر استفاده می شود. به کمک آن می توان مشخص کرد که کاربر چه نوع محتوایی را درون ورودی باید قرار دهد.
<input type="text" placeholder="نام خود را وارد کنید">
خروجی:
ویژگی جالبی که یک placeholder دارد این است که به محض اینکه کاربر شروع به تایپ کردن می کند حذف می شود.
Label
به این دلیل که عناصر ورودی به خودی خود روشن و واضح نیستند بهتر است از عنصر <label>
برای توصیف آنها استفاده کرد.
<label>ایمیل</label>
<input type="email">
خروجی:
درست است که ویژگی placeholder
هم نوعی راهنمایی برای کاربر است اما <label>
ها این امتیاز را دارند که همیشه وجود دارند حتی زمانی که کاربر در حال تایپ کردن باشد. همینطور برخلاف placeholder
از عنصر <label>
می توان برای تمام انواع عناصر ورودی استفاده کرد.
شاید به نظر برسد که توضیح مربوط به عنصر را می تواند توسط عناصر دیگر مثل پاراگراف نیز فراهم کرد اما باید بدانیم که عنصر <label>
از نظر معنایی مخصوص به همین کار می باشد. همینطور می توان این عنصر را با استفاده از ویژگی for
با یک عنصر ورودی جفت کرد.
برای این کار کافی است که مقدار ویژگی for
را برابر با id
عنصر ورودی قرار دهیم:
<label for="first_name">نام</label>
<input id="first_name" type="text">
این کار باعث می شود زمانی که بر روی label کلیک می شود عنصر ورودی فعال شود. استفاده از این قابلیت مخصوصا در ورودی های checkbox بسیار کاربردی می باشد.
خروجی:
به دلایل دستیابی پذیری عناصر صفحه هیچگاه از placeholder
بجای label
استفاده نکنید. هر کدام کاربرد خود را دارند.
Checkbox
عنصر <checkbox>
یک عنصر دو حالته تیک خورده یا نخورده می باشد. با استفاده از آن کاربر می تواند بگوید بله یا خیر.
<input type="checkbox"> یادآوری کن
خروجی:
یادآوری کن
چون سخت است برای کاربر تا روی یک دکمه کوچک کلیک کند بهتر است که این عنصر را درون یک <label>
قرار دهیم. به این صورت کاربر هرجای نوشته نیز کلیک کند این عنصر انتخاب خواهد شد.
<label>
<input type="checkbox"> با قوانین موافقم
</label>
خروجی:
همینطور می توان از روشی که در بالا با استفاده از ویژگی for
و id
گفته شده استفاده کرد.
بصورت پیشفرض یک checkbox
در حالت تیک نخورده می باشد اما می توان با استفاده از ویژگی checked
حالت اولیه این عنصر را بصورت تیک خورده قرار داد:
<label>
<input type="checkbox" checked> در خبرنامه ثبت نام شوم
</label>
خروجی:
دکمه Radio
با استفاده از دکمه های Radio می توان لیستی از گزینه ها را برای انتخاب به کاربر ارایه داد.
برای این کار باید گروهی از این دکمه ها را بوجود آورد و همه آنها را با یک نام یکسان عضو این گروه کرد. به عنوان نمونه در مثال زیر ویژگی name
همه دکمه های زیر را برابر با status
یعنی وضعیت قرار می دهیم:
<label>وضعیت ازدواج</label>
<label>
<input type="radio" name="status">
مجرد
</label>
<label>
<input type="radio" name="status">
متاهل
</label>
<label>
<input type="radio" name="status">
همسرم فوت شده
</label>
خروجی:
چون ویژگی name
دکمه ها یکسان است با انتخاب یکی از آنها دیگر دکمه ها غیرفعال می شوند.
تفاوت Radio با Checkbox
خیلی از مواقع برای طراحان سوال پیش می آید که کجا از چک باکس استفاده کنند و کجا از دکمه نوع رادیو. دو مورد زیر می تواند این سوال را پاسخ دهد:
- چک باکس می تواند فقط یکی باشد اما دکمه های نوع رادیو بصورت لیستی هستند یعنی باید حداقل دو تا باشند تا معنا پیدا کنند.
- کلیک کردن روی چک باکس اختیاری است اما انتخاب یکی از گزینه های دکمه های رادیو اجباری می باشد.
منو Dropdown
زمانی که آیتم ها و گزینه ها برای انتخاب زیاد شوند باید از منوهای کرکره ای (<select>
) که نوع دیگری از کنترل های ورودی می باشند استفاده شود.
این عناصر شبیه به دکمه های نوع رادیو کار می کنند فقط ظاهر آنها متفاوت است.
<select>
<option>فروردین</option>
<option>اردیبهشت</option>
<option>خرداد</option>
<option>تیر</option>
<option>مرداد</option>
<option>شهریور</option>
<option selected>مرداد</option>
<option>آبان</option>
<option>آذر</option>
<option>دی</option>
<option>بهمن</option>
<option>اسفند</option>
</select>
خروجی:
می توان به کمک ویژگی selected
مقدار پیشفرضی برای این لیست مشخص کرد.
همینطور می توان با استفاده از ویژگی multiple
امکان اینکه کاربر بتواند چند مورد را انتخاب کند فراهم کرد:
<label>مرورگرهایی که استفاده می کنید کدام اند؟</label>
<select multiple>
<option>Google Chrome</option>
<option>Internet Explorer</option>
<option>Mozilla Firefox</option>
<option>Opera</option>
<option>Safari</option>
</select>
خروجی:
حال کاربر می تواند با استفاده از دکمه های Ctrl یا Shift چند گزینه را انتخاب کند.
نمونه فرم ثبت نام
<form action="/signup" method="POST">
<p>
<label>جنسیت</label>
<label>
<input type="radio" name="title" value="خانم">
خانم
</label>
<label>
<input type="radio" name="title" value="آقا">
آقا
</label>
</p>
<p>
<label>نام</label>
<input type="text" placeholder="مجتبی" value="">
</p>
<p>
<label>نام خانوادگی</label>
<input type="text" placeholder="سیدی" value="">
</p>
<p>
<label>ایمیل</label>
<input type="email" placeholder="seyedmojtabaseyedi@gmail.com" value="">
</p>
<p>
<label>شماره تماس</label>
<input type="tel" placeholder="+989999999999" value="">
</p>
<p>
<label>رمز عبور</label>
<input type="password" placeholder="حداقل 8 کاراکتر" value="">
</p>
<p>
<label>تایید رمز عبور</label>
<input type="password" placeholder="کپی نکن که اشتباه نشه" value="">
</p>
<p>
<label>کشور</label>
<select>
<option>ایران</option>
<option>France</option>
<option>Germany</option>
<option>Italy</option>
<option>Japan</option>
<option>Russia</option>
<option>United Kingdom</option>
<option>United States</option>
</select>
</p>
<p>
<label>
<input type="checkbox">
با <a href="/terms">قوانین سایت</a> موافقم
</label>
</p>
<p>
<input type="submit" value="ثبت نام">
</p>
</form>
خروجی:
در HTML عناصر کنترل ورودی دیگری نیز وجود دارند اما ما در این مطلب مهمترین های آنها را بررسی کردیم.
چطور اطلاعاتی که در فرم وارد شده رو برای سرور مورد نظر بفرسته؟
توی سایت های مربوط به back-end باید دنبال این مطالب باشید.
این مسیله به اتریبیوت action در form مربوطه که ادرس گیرنده ی اطلاعات رو در بر میگیره
سلام وقتی بخوایم رنگ انتخاب شده ی option رو عوش کنیم چی کار باید بکنیم؟
test1
havij
banana
apple
circle
joje
mahi
shampo
الان وقتی apple رو انتخاب میکنیم رنگ متن سفید و رنگ پس زمینه نارنجی میشه (تو ubuntu) برای تغییر این رنگ ها چطوریه؟
تگ ها پاک شد تو نظر :| اون بالا هام نوشتم در عوض :))
تنها با css اینکار امکان پذیر نیست فعلا. با جاوااسکریپت می تونید:
http://jsfiddle.net/TroyAlford/xwFX4
اگر منظورتون رو درست متوجه شده باشم.
اهااااااااان همین بود منظورم خیلی ممنون
سلام
من یک فرم ساده طراحی کرم اما توی تراز بندیش مشکل دارم .
بعنوان مثال
نام : [ ]
نام خانوادگی : [ ]
نظرات : [ ]
میخوام به فرمم نظم بدم ، همه اینها تراز شده باشد .
ممنون میشم راهنمایی بفرمایید . یا اگر نمونه ای وجود داره …
سلام.
یک راه حل خیلی ساده و البته نچندان کامل اینه:
https://jsbin.com/roriloj/1/edit?html,css,output
فرم های سایت های خارجی رو نگاه کنید نمونه ببنید متوجه میشید باید چکار کنید.
باید ویژگی float رو بدونید حداقل.
تفاوت وبسایت با سایت چیست ؟
دمت گرم خیلی خندیدم فقط میخواد بدونه تفاوت چیه :)))
شما به جای خندیدن به دیگران . اگه سوادشو داشتی جواب این بنده خدا رو میدادی.
میخند؟؟
بخون بفهم تفاوتش رو:
Both ways are in full use. I’d venture to say you’d find many use both and use them interchangeably. I know I do. Perhaps people might sometimes steer towards website when concerned about the ambiguity that site can create in a given context. For example, I might say, “I visited Amazon’s site,” but say, “I visited Barnes & Noble’s website,” because Amazon is only known as being Internet-based, whereas Barnes & Noble is also known for having brick-and-mortar stores, so saying I visited their site could mislead the hearer to think I had visited a physical location rather than an electronic one. Aside from that scenario, I don’t see any rhyme or reason to how people choose to use site or website. Maybe we’ll see website slide away over time as the abbreviated site takes firmer hold. Maybe not.
عالی بود
بسیاااااااااار عالی. سپاسگزارم
خیلی مفید بود.
یک سوال
وقتی گزینه های اینپوت تایپ چک باکس رو انگلیسی میذارم نظمش به هم میخوره. ینی مربع انتخاب در عقب گزینه قرار میگیره. راه حلش چیه؟ دیرکشن و تکست الاین رو امتحان کردم ولی حل نشد
مهارت های خود را انتخاب کنید
HTML
CSS
JS
PHP
به خاطر جهت متن هستش، مطلب زیر کمکتون میکنه:
http://css-tricks.ir/reference/dir
سلام ممنون از آموزش خوبتون برای اینکه فورمی برای سرچ کردن تو سایت بزاریم باید از چه تگی استفاده کنیم؟
سلام ؛ با تشکر و عرض خسته نباشید .
آیا بهتر نبود در نمونه فرم ثبت نامی که قرار دادید بجای p که صرفا بخاطر بلاک کردن و زیر هم قرار گرفتن عناصر فرم استفاده شده ؛ از تگ div استفاده می شد که به مفهوم خاصی اشاره نداره ؟
سلام، ممنون از سوال خوبتون
اگر فقط بحث ظاهر باشه حرف شما کاملا درست خواهد بود، اما نکته ای که باید توی فرم ها بهش توجه کرد اینه که فرم رو باید مثل یک متنی که کاربر پشت سر هم میخونه ساخت، و توی یک متن ما تکه های اون رو با استفاده از پاراگراف از هم جدا میکنیم، اینجا هم به همون دلیل تکه های فرم میرن داخل یک عنصر پاراگراف. (اتفاقا این کار توصیه خود W3C هستش).
سلام برای ساختم جعبه سرچ وقتی از input استفاده می کنم و مثال می نویسم محصول مورد نظر را سرچ کنید از چپ به راست داخل جعبه سرچ نوشته میشه
لطفا راهنمایی کنید..مممنون
سلام، direction اون عنصر باید عوض بشه:
http://css-tricks.ir/reference/direction
سلام
من میخوام یک دکمه داشته باشم که عملیات شروع کاری رو برام انجام بده در واقع با کمک onclick ارجاع داده میشه به یک صفحه php
اما مسئله اینجاست که میخوام وقتی کلید استارت زده شد و صفحه مورد نظر اجرا شد در صفحه اصلی کلید استارت به کلید توقف تبدیل بشه و با کمک اون بتونم عملیاتی رو که درحال انجام هست رو متوقف کنم.
شدنیه؟؟؟؟؟؟؟؟
سلام
میخواستم ببینم میتونید سایتی رو معرفی کنید جهت اموزش سرور
سلام وقت بخیر
من یه باکس ورود عدد دارم که افراد قیمت وارد می کنند
چطوری میتونم وقتی عدد را دارند می زنند سه رقم سه رقم جدا کنه
سلام، این کار باید با اسکریپت انجام بشه
به عنوان نمونه این مطلب رو چک کنید:
https://css-tricks.com/input-masking
سلام وقت بخیر
چطور میشه با کلیک روی باکس ورودی کادر آبی دور باکس ظاهر نشه؟
با outline به نتیجه ای نرسیدم
سلام، وقت شما هم بخیر
شاید سایه باشه، شاید حاشیه باشه، در کل با inspect مرورگرتون میتونید بفهمید چیه و بعد توی سی اس اس حذفش کنید. کد رو هم اگر بتونید به من نشون بدید میتونم کمک کنم.
سلام روزتون بخیر
من با استفاده از input تایپ radio و label دو تا گزینه ساختم که میخوام روی هرکدوم کلیک شد یه منو باز بشه بار اول همه چی درسته ولی وقتی دوباره روشون کلیک میکنم دیگه فرمها باز نمیشه چکار باید بکنم؟؟
ممنون میشم راهنماییم کنید
سلام، وقت بخیر
یک دموی ساده از کاری که منظورتون هست رو توی سایت codepen.io بسازید و لینکش رو بزارید اینجا تا بررسی کنیم.
چطوری میشه css یه radio رو تغییر بدیم؟
می تونید از چنین روش هایی استفاده کنید:
https://css-tricks.ir/?p=431
سلام وقت بخیر .. خیلی ممنون بابت سایت خوبتون
ببخشید میشه تفاوت و را توضیح بدید؟
خیلی ممنون
عنصر for دقیقا چه کاربردی داشت؟
ویژگی for برای مرتبط کردن یک label به یک عنصر کنترلی مثل input استفاده میشه. مثلا یک کاربردش ایه که باعث میشه وقتی روی label کلیک کنید خودکار input فعال بشه.