برای ایجاد یک لیست بازشو یا کشویی که به صورت drop-down باشد و شامل چندین عنصر, از تگ select نیز استفاده می شود. (طراحی سایت , سئو سایت , طراحی سایت )
عناصر موجود در تگ select درون تگ option قرار داند و هرکدام دارای یک value می باشند که مقادیر درون لیست کشویی را شامل می شود. (طراحی سایت فروشگاهی , طراحی سایت شرکتی , ساخت سایت , قیمت طراحی سایت )
تگ select می تواند برای سنجش تعداد ورودی های کاربران هم مفید باشد و در واقع به عنوان کنترل فرم به کار برود.
قطعه کد زیر نحوه به کارگیری تگ select را نشان می دهد:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <body> <select> <option value="محصول اول">محصول اول</option> <option value="محصول دوم">محصول دوم</option> <option value="محصول سوم">محصول سوم</option> <option value="محصول چهارم">محصول چهارم</option> </select> </body> </html> |
| خصوصیت | مقدار | توضیحات |
|---|---|---|
| autofocus | autofocus | توسط این خصوصیت می توانیم مشخص نماییم که مکان نمای موس هنگام لود شدن صفحه در محل فیلد پیش فرض باشد. پشتیبانی از Html5 |
| disabled | disabled | با استفاده از این خصوصیت می توانیم لیست کشویی را غیر فعال نشان دهیم. |
| form | ٰform_id | توسط این خصوصیت فرم یا فرم هایی را که به فیلد موردنظر مربوط می باشد را مشخص می کنیم. پشتیبانی از Html5 |
| multiple | multiple | با استفاده از این خصوصیت به کاربر این اجازه را می دهیم که به تواند مقادیر مختلفی را انتخاب کند. |
| name | name | توسط این ویژگی یک نام می توان برای لیست کشویی خود قرار دهیم. |
| required | required | با استفاده از این خصوصیت از کاربر خواسته می شود که حتما فیلد مورد نظر را پر کند. پشتیبانی از Html5 |
| size | number | توسط این خصوصیت می توانید تعداد مقادیر موجود درون لیست کشویی را مشخص نمایید. |
تگ select تمام ویژگی های عمومی و رویداد های عمومی را در Html پشتیبانی میکند.
تمامی مرور گر ها را پشتیبانی می کند.
هر گاه بخواهیم در صفحه ی Html خود از یک دکمه استفاده نماییم می توانیم از تگ button نیز استفاده کنیم.(طراحی سایت , سئو سایت , طراحی سایت )
تگ button دکمه ای که قابلیت کلیک کردن داشته باشد را به ما می دهد.(طراحی سایت فروشگاهی , طراحی سایت شرکتی , ساخت سایت , قیمت طراحی سایت )
تفاوتی که تگ button با تگ input دارد در اینست که شما می توانید در تگ button از تصاویر و یا متن هم استفاده نمایید.
همیشه دقت نمایید که در تگ button بهتر است خصوصیت type را مشخص نمایید. چراکه مرور گر های مختلف ممکن است از type های پیش فرض مختلف استفاده نماییند.
همچنین اگر در صفحه ی Html خود از تگ button استفاده می کنید بهتر است آن را در تگ input قرار دهید تا مرور گرها هنگام ارسال مقادیر با اشکال روبرو نشوند.
قطعه کد زیر نحوه استفاده از تگ button را نشان می دهد:
1 2 3 4 5 6 | <!DOCTYPE html> <html> <body> <button type="button">کلیک کنید!</button> </body> </html> |
| خصوصیت | مقدار | توضیحات |
|---|---|---|
| autofocus | autofocus | هنگامی که صفحه شما لود می شود دکمه button به صورت فعال قرار می گیرد. پشتیبانی از Html5 |
| disabled | disabled | توسط این خصوصیت می توانیم یک دکمه به صورت غیر فعال ایجاد نماییم. |
| form | form_id | توسط این خصوصیت می توانیم مشخص کنیم که این دکمه برای کدام فرم ها استفاده می شود. پشتیبانی از Html5 |
| formaction | URL | با استفاده از این خصوصیت مشخص می شود که داده های ارسال شده به چه آدرسی فرستاده می شوند. این خصوصیت تنها برای submit به کار میرود. پشتیبانی از Html5 |
| formenctype | URLapplication/x-www-form-urlencoded multipart/form-data text/plain | توسط این خصوصیت میتوانید نحوه رمزگذاری بر روری داده های فرم خود را مشخص نمایید. این خصوصیت تنها برای submit به کار میرود. پشتیبانی از Html5 |
| formmethod | get post | این خصوصیت مشخص میکند که داده ها به کدام شکل به سرور انتقال داده شوند. این خصوصیت تنها برای submit به کار میرود. پشتیبانی از Html5 |
| formnovalidate | formnovalidate | با استفاده از این خصوصیت می توانید مشخص نمایید که داده های یک فرم نیازی به سنجش اعتبار ندارند. پشتیبانی از Html5 |
| formtarget | _blank _self _parent _top framename | توسط این خصوصیت مشخص می شود که هنگام ارسال فرم پیغام در کجا نمایش داده شود. این خصوصیت تنها برای submit به کار میرود. پشتیبانی از Html5 |
| name | name | توسط این خصوصیت شما میتوانید برای button خود یک نام قرار دهید. |
| type | button reset submit | توسط این خصوصیت نوع button شما مشخص می شود. |
| value | text | توسط این خاصیت می توانیم برای button خود یک مقدار اولیه قرار دهیم. |
تگ button تمام ویژگی های عمومی و رویداد های عمومی را در Html پشتیبانی می کند.
تمامی مرور گر ها را پشتیبانی می کند.
در داخل تگ form تگی به نام textarea قررار دارد که برخی از فرم ها برای آنکه کاربران بتوانند متن دلخواه خود را وارد نمایند از آن استفاده می کنند. (طراحی سایت , سئو سایت , طراحی سایت )
تگ textarea وظیفه کنترل تعداد خطوط ورودی را انجام می دهد و به صورت دو تگ باز و بسته ی <textarea></textarea> به کاربرده می شود.(طراحی سایت فروشگاهی , طراحی سایت شرکتی , ساخت سایت , قیمت طراحی سایت )
توسط تگ textarea می توانیم چند سطر خطوط نوشته ایجاد کنیم و از تعداد نامحدودی کاراکتر بهره ببریم. در این صورت امکان ادیت و ویرایش مطالب برای کاربران ساده تر خواهد بود.
اندازه متون را هم می توانیم از طریق مقدار دهی به دو خصوصیت row و cols مشخص نماییم و هم میتوانیم با مقدار دهی عناصر در css ارتفاع و عرض مشخص به آن بدهیم.
قطعه کد زیر نحوه استفاده از این تگ را نشان می دهد:
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <body> <form action="send-form-information.php" method="post"> <textarea rows="5" cols="50">نظر خود را وارد نمایید</textarea> </form> </body> </html> |
| خصوصیت | مقدار | توضیحات |
|---|---|---|
| autofocus | autofocus | توسط این خصوصیت می توانیم محل مکان نما را پس از لود شدن صفحه به صورت پیش فرض درون فیلد قرار دهیم. پشتیبانی از Html5 |
| cols | number | بااستفاده از این خصوصیت می توانید عرض textarea را مشخص نمایید. |
| disabled | disabled | توسط این خصوصیت محل textarea به صورت غیرفعال می باشد. |
| form | form_id | با استفاده از این خصوصیت می توانید فرم هایی که به فیلد مورد نظر تعلق دارند را مشخص نمایید. پشتیبانی از Html5 |
| maxlength | number | توسط این خصوصیت می توانید تعداد ماکسیسم کاراکتری که می خواهید در تگ textarea قرار دهید را مشخص نمایید. پشتیبانی از Html5 |
| name | text | توسط این خصوصیت یک نام برای تگ input قرار می دهیم. |
| placeholder | text | توسط این خصوصیت می توانید نمونه ای از ورودی مورد نظر را قرار دهید تا به صورت کمرنگ در فیلد قرار بگیرد و با قرار گیری موس روی فیلد مورد نظر از بین می رود. پشتیبانی از Html5 |
| readonly | readonly | نشان دهنده این است که فیلد مورد نظر فقط خواندنی است. |
| rows | number | توسط این خصوصیت می توانید تعداد سطر هایی که درون تگ textarea وجود دارد را مشخص نمایید. |
| wrap | hard soft | با استفاده از این خصوصیت نحوه قرار گیری یک متن در ناحیه ی textarea مشخص می شود. |
تگ textarea تمام ویژگی های عمومی و رویداد های عمومی را در Html پشتیبانی میکند.
تمامی مرور گر ها را پشتیبانی می کند.
تگ input یکی از مهمترین تگ های موجود در تگ form می باشد. با استفاده از این تگ می توانیم کنترل های لازم بر روی اطلاعات کاربران را انجام دهیم. (طراحی سایت , سئو سایت , طراحی سایت )
در واقع تگ input نشان دهنده ی یک فیلد ورود اطلاعات می باشد. (طراحی سایت فروشگاهی , طراحی سایت شرکتی , ساخت سایت , قیمت طراحی سایت )
باتوجه به ویژگی و خصویت type می توانیم از فیلد ورودی input برای انواع ورودی های مختلف استفاده نماییم.
تگ input یک تگ بسته است و به صورت یک عنصر تنها به کار می رود.
اگر بخواهید در کنار input خود یک برچسب قرار دهید می توانید از تگ lable استفاده نمایید.
نمای کلی برای استفاده از تگ input به صورت زیر می باشد:
1 | <input type="type" name="name" > |
به طور مثال تگ input به کار رفته در عنصر form :
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <body style="direction:rtl"> <form name="input" action="html_form_action.php" method="get"> نام: <input type="text" name="FirstName" value="Amir" /><br /> فامیل: <input type="text" name="LastName" value="PahlevanSadegh" /><br /> <input type="submit" value="Submit" /> </form> </body> </html> |
| خصوصیت | مقدار | توضیحات |
|---|---|---|
| accept | file_extension audio/* video/* image/* media_type | این خصوصیت مشخص کننده نوع فایلی است که شما ارسال می کنید. این خصوصیت تنها برای file به کار میرود. |
| aling | left center right justify | این خصوصیت در حال حاضر در Html5 پشتیبانی نمی شود. با استفاده از این خصوصیت می توانیم image input را در جهت های مختلف ترازبندی کنیم. این خصوصیت تنها برای image به کار میرود. |
| alt | text | با استفاده از این خصوصیت می توانید برای عکس خود یک متن جایگزین استفاده کنید. این خصوصیت تنها برای image به کار میرود. |
| autocomplete | on off | با استفاده از این خصوصصیت می توانید مشخص کنید که فیلد های فرم ها به صورت اتوماتیک پر شوند یا خیر. پشتیبانی از Html5 |
| autofocus | autofocus | بااستفاده از این خصوصیت مکان نما در فیلد پیش فرض پس از لود صفحه قرار می گیرد. پشتیبانی از Html5 |
| checked | checked | بااسفاده از این ویژگی تگ input به طور خود کار پس از لود شدن صفحه در حالت انتخاب قرار می گیرد. این خصوصیت تنها برای checkbox و radio به کار میرود. |
| disabled | disabled | با استفاده از این خصوصیت می توانید تگ input خود را غیر فعال کنید. |
| form | form_id | با استفاده از این خصوصیت می توانید فرم هایی که به فیلد مورد نظر تعلق دارند را مشخص نمایید. پشتیبانی از Html5 |
| formaction | URL | این خصوصیت آدرس قسمتی که عملیات کنترلی برروی ورودی ها انجام می شود را ایجاد می کند. این خصوصیت تنها برای ورودی های image و submit به کار میرود. پشتیبانی از Html5 |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | توسط این خصوصیت چگونگی رمزگذاری برروی داده های فرم ها مشخص می شود. این خصوصیت تنها برای ورودی های image و submit به کار میرود. پشتیبانی از Html5 |
| formmethod | get post | این خصوصیت مشخص میکند که داده ها به کدام شکل به سرور انتقال داده شوند. این خصوصیت تنها برای ورودی های image و submit به کار میرود. پشتیبانی از Html5 |
| formnovalidate | formnovalidate | توسط این خصوصیت دیگر داده های ورودی به سرور نیازی به اعتبار سنجی ندارند. پشتیبانی از Html5 |
| formtarget | _blank _self _parent _top framename | توسط این خصوصیت می توانید مشخص کنید که پاسخ دریافت شده از سرور به چه نحوی به نمایش گذاشته شود. پشتیبانی از Html5 |
| height | pixels | توسط این خصوصیت می توانید ارتفاع تگ input را مشخص نمایید. این خصوصیت تنها برای image به کار میرود. پشتیبانی از Html5 |
| list | datalist_id | توسط این خصوصیت می توانید یک datalist را به فیلد متنی خود اضافه کنید. پشتیبانی از Html5 |
| max | number date | توسط این خصوصیت می توانید مقدار ماکسیمم تگ input را مشخص نمایید. پشتیبانی از Html5 |
| maxlength | number | توسط این خصوصیت می توانید تعداد ماکسیسم کاراکتری که می خواهید در فیلد خود قرار دهید را مشخص نمایید. پشتیبانی از Html5 |
| min | number date | توسط این خصوصیت می توانید تعداد مینیموم کاراکتری که می خواهید در فیلد خود قرار دهید را مشخص نمایید. پشتیبانی از Html5 |
| multiple | multiple | توسط این خصوصیت می توانید بیشتر از یک مقدار در تگ input قرار دهید. پشتیبانی از Html5 |
| name | text | توسط این خصوصیت یک نام برای تگ input قرار می دهیم. |
| pattern | regexp | بااستفاده از این خصوصیت یک الگو برای اعتبار سنجی فیلد ورودی می توانید مشخص کنید. پشتیبانی از Html5 |
| placeholder | text | توسط این خصوصیت می توانید نمونه ای از ورودی مورد نظر را قرار دهید تا به صورت کمرنگ در فیلد قرار بگیرد و با قرار گیری موس روی فیلد مورد نظر از بین می رود. پشتیبانی از Html5 |
| readonly | readonly | نشان دهنده این است که فیلد مورد نظر فقط خواندنی است. |
| required | required | این خصوصیت نشان می دهد که پر کردن فیلد توسط کاربر الزامی است. پشتیبانی از Html5 |
| size | number | توسط این تعداد کاراکتری که میتواند در تگ input قرار گیرد مشخص می شود. |
| src | URL | توسط این خصوصیت می توانید آدرس تصویری که میخواهید به عنوان دکمه جستجو استفاده کنید را قرار می دهید. این خصوصیت تنها برای image به کار میرود. |
| step | number | با استفاده از این خصوصیت می توانید مشخص کنید که تعداد فاصله ها در تگ input چگونه باشد. پشتیبانی از Html5 |
| type | button checkbox color date datetime datetime-local file hidden image month number password radio range reset search submit tel text time url week | توسط این خصوصیت می توانید مشخص کنید که نوع و نحوه نمایش تگ input به چه صورت باشد. می تواند به صورت دکمه یا فایل یا پسورد و یا ایمیل وغیره وجود داشته باشد. |
| value | text | با استفاده از این خصوصیت می توانید برای تگ input یک مقدار را مشخص نمایید. |
| width | pixels | توسط این خصوصیت می توانید عرض تگ input را مشخص نمایید. پشتیبانی از Html5 |
تگ input تمام ویژگی های عمومی و رویداد های عمومی را در Html پشتیبانی میکند.
تمامی مرور گر ها را پشتیبانی می کند.
در این مقاله با آموزش تگ blockquote در Html در کنار شما علاقمنداند یادگیری Html و همراهان سئوراز هستیم:
تگ blockquote برای نشان دادن نقل و ول به کار میرود.
تگ <blockquote> در اکثر مرورگرها به صورت برجسته و ویژه تری نمایش داده میشود. (طراحی سایت , سئو سایت , طراحی سایت )
(طراحی سایت فروشگاهی , طراحی سایت شرکتی , ساخت سایت , قیمت طراحی سایت )
1 | <blockquote cite="url">text</blockquote> |
برای مثال:
1 | <blockquote cite="https://seoraz.com/درباره-ما">سئوراز با سابقه 11 ساله در زمینه طراحی سایت ، سئو ، بهینه سازی سایت فعال میباشد. در حال حاضر با هدف یک تیم دانش بنیان ( استارتاپ ) دور هم گرد آمده ایم تا با ارائه ایده هایی بر پایه خدمات به نیاز های مشتریان پاسخگو باشیم.</blockquote> |
خروجی قطعه کد بالا:
سئوراز با سابقه 11 ساله در زمینه طراحی سایت ، سئو ، بهینه سازی سایت فعال میباشد. در حال حاضر با هدف یک تیم دانش بنیان ( استارتاپ ) دور هم گرد آمده ایم تا با ارائه ایده هایی بر پایه خدمات به نیاز های مشتریان پاسخگو باشیم.
تمامی مرورگرها از این تگ پشتیبانی می کنند.
| خصوصیت | مقدار | توضیحات |
| cite | url | مرجع یا منبعی متن را از روی آن برداشتیم. |