حقوقی

روانشناسی

حقوقی

روانشناسی

آموزش گام به گام و تصویری HTML قسمت بیستم و پنجم (ایران گستر)

HTML

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

[caption id="attachment_3063" align="aligncenter" width="255"] HTML

HTML[/caption]

Input های HTML5

همزمان با معرفی HTML5 انواع مختلفی از input ها نیز به توسعه دهندگان معرفی شد تا بتوانند با استفاده از آن ها برنامه های کاربردی تر و راحت تری بنویسند. آن ها عبارت اند از:(ایران گستر)

color
date
datetime-local
email
month
number
range
search
tel
time
url
week

نکته: از آن جایی که این نوع input ها نسبتا جدید تر هستند ممکن است در تمام مروگر ها کار نکنند. اگر input ای در مرورگری پشتیبانی نشود، به جای آن یک فیلد خالی از نوع <"input type="text> نمایش داده خواهد شد.(ایران گستر)

Input های رنگی

این نوع از input ها به صورت <"input type="color> مشخص می شوند و کارشان ایجاد فیلد هایی است که رنگ خاصی را انتخاب کنند. اگر مرورگر کاربر از این input پشتیبانی کند یک color picker برای کاربر نمایش داده خواهد شد:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Color Picker</h2>

<p>The <strong>input type="color"</strong> is used for input fields that should contain a color.</p>

<p dir='rtl'>رنگ مورد نظرتان را انتخاب کنید</p>

</form>

<p dir='rtl'>این قابلیت در internet explorer 11 و safari 9.1 و نسخه های قبلی این دو مرورگر پشتیبانی نمی شود.</p>

</body>

</html>

مشاهده ی خروجی در JSBin

Input های تاریخ

input های نوع <"input type="date> فیلد هایی مخصوص نگه داری تاریخ می سازند. اگر مرورگر کاربر از آن پشتیبانی کند یک date picker نمایش داده خواهد شد:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Date Field</h2>

<p>The <strong>input type="date"</strong> is used for input fields that should contain a date.</p>

<p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.<p>

تاریخ تولد:

</form>

<p dir='rtl'>این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari پشتیبانی نمی شود.</p>

</body>

</html>

مشاهده ی خروجی در JSBin

شما همچنین می توانید از attribute های min و max استفاده کنید تا محدودیت هایی را برای این تاریخ ایجاد کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Date Field Restrictions</h2>

<p>Use the min and max attributes to add restrictions to dates:</p>

تاریخی قبل از سال 1980-01-01 را انتخاب کنید:<br>

تاریخی بعد از سال 2000-01-01 را انتخاب کنید:<br>

</form>

<p dir='rtl'>این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari پشتیبانی نمی شود.</p>

</body>

</html>

مشاهده ی خروجی در JSBin

Input های Datetime-local

این نوع از input ها با <"input type="datetime-local> مشخص شده و کار آنها دریافت ساعت و تاریخ (بدون هر گونه time zone – منطقه ی زمانی) می باشد:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Local Date Field</h2>

<p>The <strong>input type="datetime-local"</strong> specifies a date and time input field, with no time zone.</p>

<p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.</p>

Birthday (date and time):

</form>

<p dir='rtl'>این قابلیت در internet explorer 12 و نسخه های قبلی آن و همچنین در safari و firefox پشتیبانی نمی شود.</p>

</body>

</html>

مشاهده ی خروجی در JSBin

Input های ایمیل

این نوع input ها با <"input type="email> مشخص می شوند و کارشان دریافت ایمیل کاربران است. این نوع input ها معمولا از نظر ظاهری دقیقا شبیه به فیلدهای متنی ساده هستند و تنها تفاوتشان در این است که آدرس ایمیل کاربر را validate می کنند؛ یعنی چک می کنند که آدرس ایمیل نامعتبر نباشد و از الگوی صحیح پیروی کند.(ایران گستر)

همچنین برخی از تلفن های هوشمند می توانند این نوع input را تشخیص دهند و در کیبورد کاربر کلید “com.” را اضافه کنند.(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Email Field</h2>

<p>The <strong>input type="email"</strong> is used for input fields that should contain an e-mail address:</p>

E-mail:

</form>

<b>هشدار:</b>این قابلیت در Internet Explorer 9 و نسخه های قبل از آن پشتیبانی نمی شود.</p>

</body>

</html>

مشاهده ی خروجی در JSBin

سعی کنید در خروجی بالا یک ایمیل نا معتبر (مانند example.com یا example یا example.com@me و …) وارد کنید. خواهید دید که فرم ثبت نخواهد شد و به جای آن یک هشدار به شما نمایش داده می شود.(ایران گستر)

Input های فایل

کار این نوع input ها که با <"input type="file> مشخص می شوند دریافت فایل های کاربر است. در صورتی که نیاز باشد کاربر فایلی را روی سرور شما آپلود کند (مانند تصویر پروفایل) می توانید از این نوع input استفاده کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h1>File upload</h1>

<p>Show a file-select field which allows a file to be chosen for upload:</p>

<br>

یک فایل انتخاب کنید:

</form>

</body>

</html>

مشاهده ی خروجی در JSBin

Input های ماه

نوع <"input type="month> به کاربر اجازه می دهد که یک ماه و سال را انتخاب کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Month Field</h2>

<p>The <strong>input type="month"</strong> allows the user to select a month and year.</p>

<p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.</p>

Birthday (month and year):

</form>

<p dir='rtl'><strong>هشدار:</strong> این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari و firefox پشتیبانی نمی شود.</p>

</body>

</html>

مشاهده ی خروجی در JSBin

Input های عددی

این نوع input ها که به صورت <"input type="number> مشخص می شوند به کاربر اجازه میدهند که در یک فیلد تنها از اعداد استفاده کند. شما می توانید با min و max حداقل و حداکثر اعداد مجاز را نیز تعیین کنید.(ایران گستر)

در مثال زیر به مرورگر گفته ایم که کاربر حق دارد یک عدد بین 1 و 5 را انتخاب کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Number Field</h2>

<p>The <strong>input type="number"</strong> defines a numeric input field.</p>

<p>You can use the min and max attributes to add numeric restrictions in the input field:</p>

Quantity (between 1 and 5):

</form>

<p dir='rtl'><b>هشدار:</b> این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>

</body>

</html>

مشاهده ی خروجی در JSBin

Input های محدوده

این نوع input ها با <"input type="range> مشخص می شوند و کارشان تعیین عددی است که مقدار دقیق آن برای ما مهم نیست (مانند slider ها). حد پیش فرض آن از 0 تا 100 است اما شما می توانید آن را تغییر دهید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Range Field</h2>

<p>Depending on browser support:<br>The input type "range" can be displayed as a slider control.<p>

Points:

</form>

<b>هشدار:</b>

این قابلیت در internet explorer 9 و نسخه های قبل تر از آن پشتیبانی نمی شود.

</p>

</body>

</html>

مشاهده ی خروجی در JSBin

Input های جست و جو

این نوع input ها با <"input type="search> مشخص می شوند و فیلدهایی برای قسمت جست و جو در سایت شما هستند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Search Field</h2>

<p>The <strong>input type="search"</strong> is used for search fields (behaves like a regular text field):</p>

Search Google:

</form>

</body>

</html>

مشاهده ی خروجی در JSBin

این input ها از نظر کارکرد و از نظر ظاهر هیچ تفاوتی با فیلد های متنی ساده ندارند. تفاوت اصلی در بحث semantics و درک موتور های جست و جو از سایت شما است.

Input های تلفن

این نوع input ها که با <"input type="tel> مشخص می شوند مسئولیت دریافت شماره تلفن کاربران را دارند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Telephone Field</h2>

<p>The <strong>input type="tel"</strong> is used for input fields that should contain a telephone number:</p>

Telephone: <input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required>

<span>Format: 123-45-678</span>

</form>

</body>

</html>

مشاهده ی خروجی در JSBin

احتمالا متوجه قسمت "{pattern="[0-9]{3}-[0-9]{2}-[0-9]{3 نشده اید. از آنجا که هر کشوری الگوی شماره تلفن های مخصوص خودش را دارد شما می توانید این الگو را بر اساس شماره تلفن های کشور خودتان تنظیم کنید. در الگوی بالا گفته شده است {3}[0-9] که یعنی 3 رقم اول شماره تلفن می توانند شامل اعداد 0 تا 9 (همه ی اعداد) بشوند. سپس دو رقم بعدی و در آخر سه رقم بعدی را مشخص کرده ایم. شما می توانید سعی کنید این الگو را مطابق با ایران طراحی کنید.(ایران گستر)

Input های زمان

این نوع input ها با <"input type="time> مشخص می شوند و به کاربر اجازه می دهند که بدون ذکر هیچ time zone یا منطقه ی زمانی، یک زمان خاص را انتخاب کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Time Field</h2>

<p>The <strong>input type="time"</strong> allows the user to select a time (no time zone):</p>

<p>Depending on browser support:<br>A time picker might pop-up when you enter the input field.</p>

Select a time:

</form>

<p dir='rtl'>این قابلیت در internet explorer 12 و نسخه های قبل تر آن و همچنین در safari پشتیبانی نمی شود.</p>

</body>

</html>

مشاهده ی خروجی در JSBin

Input های URL

این نوع input ها به صورت <"input type="url> مشخص می شوند و مسئولیت دریافت یک آدرس اینترنتی (URL) را دارند. برخی از تلفن های هوشمند می توانند این نوع input را تشخیص دهند و در کیبورد کاربر کلید “com.” را اضافه کنند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>URL Field</h2>

<p>The <strong>input type="url"</strong> is used for input fields that should contain a URL address:</p>

Add your homepage:

</form>

<p dir='rtl'>این قابلیت در internet explorer 9 و نسخه های قبل آن پشتیبانی نمی شود.</p>

</body>

</html>

مشاهده ی خروجی در JSBin

کار اصلی این نوع فیلد validate کردن داده ی کاربر است؛ یعنی چک می کند تا ببیند آیا آدرس URL ای که کاربر وارد کرده است دارای الگوی صحیحی است یا خیر. می توانید این مورد را در خروجی بالا چک کنید.(ایران گستر)

Input های هفته

این نوع input ها به صورت <"input type="week> نوشته می شوند و به کاربر اجازه می دهند تا یک هفته و یک سال را انتخاب کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Week Field</h2>

<p>The <strong>input type="week"</strong> allows the user to select a week and year:</p>

<p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.</p>

Select a week:

</form>

<p dir='rtl'>این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari و firefox پشتیبانی نمی شود.</p>

</body>

</html>

مشاهده ی خروجی در JSBin

fateme شنبه 27 مهر 1398 ساعت 12:43

0 نظر

آموزش گام به گام و تصویری HTML قسمت بیستم و چهارم (ایران گستر)

HTML

[caption id="attachment_3063" align="aligncenter" width="255"] HTML

HTML[/caption]

Input های رایج و قدیمی

همانطور که در دو قسمت قبلی دیدیم، input ها قسمت مهمی از فرم های HTML هستند و ما می خواهیم در این قسمت انواع آن ها را بررسی کنیم. انواع input ها از این قرار هستند:(ایران گستر)

<"input type="button>
<"input type="checkbox>
<"input type="color>
<"input type="date>
<"input type="datetime-local>
<"input type="email>
<"input type="file>
<"input type="hidden>
<"input type="image>
<"input type="month>
<"input type="number>
<"input type="password>
<"input type="radio>
<"input type="range>
<"input type="reset>
<"input type="search>
<"input type="submit>
<"input type="tel>
<"input type="text>
<"input type="time>
<"input type="url>
<"input type="week>

ما می خواهیم این موارد را طی دو قسمت بررسی کنیم. در قسمت اول که همین قسمت می باشد، input هایی را به شما معرفی می کنیم که بسیار کاربردی بوده و سال های سال است که مورد استفاده قرار می گیرند. این نوع input ها توسط تمام برنامه نویسان وب شناخته شده هستند و سابقه ای دیرینه دارند. در قسمت بعد به سراغ input هایی خواهیم رفت که در HTML5 معرفی شده اند؛ این input ها تقریبا جدید تر هستند و بعضی از آن ها ممکن است در تمام مرورگر ها پشتیبانی نشوند اما امکانات بیشتری به ما می دهند. پس ابتدا برویم سراغ input های اصلی و رایج(ایران گستر)

Input های متنی

<"input type="text> به معنی این است که input ما از نوع متنی بوده و تبدیل به یک فیلد خالی برای تایپ کاربر می شود:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Text field</h2>

<p>The <strong>input type="text"</strong> defines a one-line text input field:</p>

First name:<br>

<br>

Last name:<br>

</form>

<p dir='rtl'>توجه داشته باشید که خود تگ form نمایش داده نمی شود.</p>

<p dir='rtl'>عرض پیش فرض هر فیلد 20 کاراکتر است</p>

</body>

</html>

مشاهده ی خروجی در JSBin

Input های رمز عبور

فیلد های رمز عبور دقیقا مانند فیلد های متنی هستند بنابراین <"input type="password> هنوز هم یک فیلد خالی برای تایپ به ما می دهد اما تفاوت اینجاست که برای حفظ حریم شخصی کاربر، ظاهر هر چیزی که در این قسمت بنویسید با دایره های سیاه جایگزین می شود و کسی نمی تواند رمز تایپ شده ی شما را ببیند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Password field</h2>

<p>The <strong>input type="password"</strong> defines a password field:</p>

User name:<br>

<br>

User password:<br>

</form>

<p dir='rtl'>کاراکتر هایی که در input های رمزی تایپ می شوند دیده نمی شوند. می توانید در قسمت راست این موضوع را امتحان کنید.</p>

</body>

</html>

مشاهده ی خروجی در JSBin

Input های ارسال فرم

<"input type="submit> بدین معنا است که input مورد نظر می خواهد فرمی را ثبت و ارسال (submit) کند. این فرم سپس به یک form-handler ارسال می شود. همانطور که قبلا هم توضیح دادیم form-handler صفحات اسکریپتی در سمت سرور هستند که کار پردازش و ذخیره ی داده های ارسالی را بر عهده دارند و آدرسشان در قسمت action مشخص می شود:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Submit Button</h2>

<p>The <strong>input type="submit"</strong> defines a button for submitting form data to a form-handler:</p>

First name:<br>

<br>

Last name:<br>

</form>

<p>If you click "Submit", the form-data will be sent to a page called "/action_page.php".</p>

</body>

</html>

مشاهده ی خروجی در JSBin

نکته: اگر مقدار value را برای submit تعیین نکنید، یک مقدار پیش فرض برای آن تعیین می شود که معمولا همان کلمه ی submit است.(ایران گستر)

Input های پاک کردن فرم

input هایی که به صورت <"input type="reset> نوشته می شوند، معمولا یک reset button (دکمه ی ریستارت یا شروع مجدد) را ایجاد می کنند و زمانی که کاربر روی این دکمه کلیک کند تمام محتوایی که در فیلد ها نوشته است پاک می شود.(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Reset Button</h2>

<p>The <strong>input type="reset"</strong> defines a reset button that will reset all form values to their default values:</p>

First name:<br>

<br>

Last name:<br>

</form>

<p dir='rtl'>اگر در فیلد های بالا مقداری را بنویسید و تغییرشان دهید، سپس روی دکمه ی reset کلیک کنید تمام محتوای فرم به حالت اولیه ی آن بازمیگردد.</p>

</body>

</html>

مشاهده ی خروجی در JSBin

Input های radio

در جلسات قبل با radio button ها آشنا شدیم؛ آن ها به هر کاربر اجازه می دهند تا از بین چند گزینه تنها یک گزینه را انتخاب کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Radio Buttons</h2>

<p>The <strong>input type="radio"</strong> defines a radio button:</p>

<p dir='rtl'>لطفا جنسیت خود را انتخاب کنید:</p>

<input type="radio" name="gender" value="other"> نمیخواهم اعلام کنم<br><br>

</form>

</body>

</html>

مشاهده ی خروجی در JSBin

Input های Checkbox

input های checkbox به صورت <"input type="checkbox> ساخته می شوند؛ آن ها به کاربر اجازه می دهند که از بین چند گزینه صفر، یک، دو، سه و … یا همه را انتخاب کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Checkboxes</h2>

<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

<p dir='rtl'>مالک کدام موارد هستید؟</p>

<input type="checkbox" name="vehicle1" value="Bike">من دوچرخه دارم

<br>

<input type="checkbox" name="vehicle2" value="Car">من ماشین دارم

<br>

<input type="checkbox" name="bus" value="Car">من اتوبوس دارم

</form>

</body>

</html>

مشاهده ی خروجی در JSBin

Input های دکمه ای

این نوع از input ها به صورت <"input type="button> تعریف می شوند. سوالی که در ابتدا پیش می آید این است که برخی از input های قبلی نیز دکمه می شدند. چرا به این نوع از input ها به طور خاص دکمه ای می گوییم؟ جواب این است که این نوع از input ها تنها یک دکمه هستند و کارکرد آن ها را شما و معمولا با جاوا اسکریپت مشخص می کنید. input های قبلی که تبدیل به یک دکمه شدند کارشان تعریف شده بود و از این نظر با input های دکمه ای متفاوت هستند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Input Button</h2>

</body>

</html>

مشاهده ی خروجی در JSBin

تا اینجای کار با input های معروف HTML آشنا شدیم. در قسمت بعد به سراغ input هایی خواهیم رفت که در HTML5 معرفی شده اند، یعنی:(ایران گستر)

color
date
datetime-local
email
month
number
range
search
tel
time
url
week

fateme جمعه 26 مهر 1398 ساعت 11:45

0 نظر

آموزش گام به گام و تصویری HTML قسمت بیستم و سوم (ایران گستر)

HTML

[caption id="attachment_3063" align="aligncenter" width="255"] HTML

HTML[/caption]

عنصر <input>

در جلسه ی قبل به صورت خلاصه اشاره ای به این عنصر داشتیم اما در این قسمت کمی مفصل تر صحبت خواهیم کرد. مهم ترین عنصر یک فرم <input> است که بر اساس مقدار type میتواند به انواع و اشکال مختلفی ظاهر شود:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The input Element</h2>

Enter your name:

</form>

</body>

</html>

مشاهده ی خروجی در JSBin

نکته: اگر مقدار type را خالی بگذارید، مقدار پیش فرض که همان text است برایش تعیین می شود.(ایران گستر)

عنصر <select>

این عنصر یک لیستِ drop-down را می سازد. لیست های drop-down لیست هایی هستند که با کلیک روی آن ها می توانید از بین گزینه هایشان که نمایان می شود انتخاب کنید. به مثال زیر توجه کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The select Element</h2>

<p>The select element defines a drop-down list:</p>

<option value="volvo">Volvo</option>

</select>

</form>

</body>

</html>

مشاهده ی خروجی در JSBin

نکته: این خروجی ها تنها برای نمایش ظاهر این عناصر هستند و فاقد قدرت پردازشی می باشند، بنابراین با کلیک روی submit اتفاقی نمی افتد اما در حالت واقعی داده ها پردازش خواهند شد.(ایران گستر)

هر کدام از <option> های بالا یکی از گزینه های لیست ما می باشد و در حالت پیش فرض اولین <option> بدون کلیک و در فیلد ما نمایان خواهد بود. اگر می خواهید این موضوع را تغییر دهید و <option> مورد نظر خود را گزینه ی پیش فرض کنید از selected استفاده کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Pre-selected Option</h2>

<p>You can preselect an option with the selected attribute.</p>

<option value="volvo">Volvo</option>

</select>

</form>

</body>

</html>

مشاهده ی خروجی در JSBin

همچنین اگر می خواهید تعداد گزینه هایی که نمایان هستند افزایش پیدا کنند، می توانید از size استفاده کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Visible Option Values</h2>

<p>Use the size attribute to specify the number of visible values.</p>

<option value="volvo">Volvo</option>

</select>

</form>

</body>

</html>

مشاهده ی خروجی در JSBin

در آخر اگر می خواهید کاربر بتواند چندین گزینه را انتخاب کند از multiple استفاده می کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Allow Multiple Seletcions</h2>

<p>Use the multiple attribute to allow the user to select more than one value.</p>

<option value="volvo">Volvo</option>

</select>

</form>

<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>

</body>

</html>

مشاهده ی خروجی در JSBin

برای این کار کاربر باید کلید کنترل (Ctrl) را نگه دارد و سپس گزینه های مورد نظرش را انتخاب کنید. بدین ترتیب می توان چندین گزینه را انتخاب نمود. می توانید این مورد را در مثالا بالا امتحان کنید.(ایران گستر)

عنصر <textarea>

عنصر <textarea> یک فیلد متنیِ چند خطی را ایجاد می کند. به مثال زیر توجه کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Textarea</h2>

<p>The textarea element defines a multi-line input field.</p>

<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>

<br>

</form>

</body>

</html>

مشاهده ی خروجی در JSBin

در کد بالا rows مسئول مشخص کردن تعداد خطوط قابل رویت در text area و cols مسئول مشخص کردن عرض قابل رویت آن هستند. البته می توانید این اندازه ها را با CSS نیز تعیین کنید:(ایران گستر)

The cat was playing in the garden.

</textarea>

عنصر <button>

عنصر <button> یک دکمه را تعریف می کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The button Element</h2>

</body>

</html>

مشاهده ی خروجی در JSBin

همانطور که می بینید دکمه ها به خودی خود کاری نمی کنند و ما باید برایشان تعریف کنیم که قرار است چه کار کنند.

نکته: مرورگر های مختلف ممکن است از مقادیر مختلفی برای حالت پیش فرضِ type استفاده کنند بنابراین بهتر خودتان آن را مشخص کنید.(ایران گستر)

عناصر HTML5

با معرفی HTML5 دو عنصر دیگر نیز به عناصر بالا اضافه شدند:(ایران گستر)

<datalist>
<output>

این عناصر جدید هستند بنابراین در مرورگر های قدیمی نمایش داده نمی شوند و جای آنها خالی گذاشته می شود.(ایران گستر)

عنصر <datalist> لیستی از گزینه های از پیش تعیین شده را برای <input> ایجاد می کند و کاربران هنگام کار با آن با یک لیست drop-down سر و کار دارند. همچنین list مربوط به <input> باید به id مربوط به <datalist> اشاره کند.(ایران گستر)

مثال:

<!DOCTYPE html>

<html>

<body>

<h2>The datalist Element</h2>

<p>The datalist element specifies a list of pre-defined options for an input element.</p>

</datalist>

</form>

<p dir='rtl'><b>هشدار:</b> این قابلیت در مرورگر های سافاری و اینترنت اکسپلورر 9 و قبل تر پشتیبانی نمی شود</p>

</body>

</html>

مشاهده ی خروجی در JSBin

عنصر <output> نیز نماینده ی یک محاسبه است (معمولا محاسبه هایی که با اسکریپت و در سمت سرور انجام می شوند):(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The output Element</h2>

<p>می توانید مقدار جمع این دو عدد را به راحتی پیدا کنید</p>

<form action="/action_page.php"

oninput="x.value=parseInt(a.value)+parseInt(b.value)">

100 +

</form>

<p dir='rtl'><strong>هشدار:</strong> این قابلیت در Edge 12 و IE و مرورگر های قدیمی پشتیبانی نمی شود</p>

</body>

</html>

مشاهده ی خروجی در JSBin

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

fateme جمعه 26 مهر 1398 ساعت 11:45

0 نظر

آموزش گام به گام و تصویری HTML قسمت بیستم و دوم (ایران گستر)

HTML

[caption id="attachment_3063" align="aligncenter" width="255"] HTML

HTML[/caption]

عنصر <form>

عنصر <form> فرمی را تعریف می کند که برای دریافت داده های کاربر مورد استفاده قرار می گیرد و به طور کل به این شکل است:(ایران گستر)

<form>

عناصر مختلف فرم در این قسمت نوشته می شوند.

</form>

هر فرم HTML ای دارای عناصر فرم (form elements) است و به خودی خود هیچ کاری را نمی تواند انجام دهد. این عناصر فرم در واقع انواع مختلف دریافت داده ها هستند؛ به طور مثال text field (مانند فیلد دریافت نام و نام خانوادگی کاربر)، checkbox (فیلد هایی که کاربر آن ها را تیک می زند) و … . ما می خواهیم با این عناصر به صورت خلاصه آشنا شویم.(ایران گستر)

عنصر <input>

عنصر <input> مهم ترین و شناخته شده ترین عنصر یک فرم است. ظاهر این تگ بر اساس attribute ای به نام type تغییر می کند و بستگی دارد که ما به این attribute چه مقداری داده باشیم:(ایران گستر)

Type	توضیحات
<input type=”text”>	یک فیلد متنی خالی به ما می دهد
<input type=”radio”>	یک radio button به ما می دهد (انتخاب یک گزینه بین چند گزینه)
<input type=”submit”>	یک submit button به ما می دهد (برای ثبت نهایی و ارسال فرم)

حالت `<"input type="text>`

نوع text یک فیلد متنی خالی به ما می دهد:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Text Input</h2>

<form>

نام:<br>

<br>

نام خانوادگی:<br>

</form>

<p dir='rtl'>توجه داشته باشید که خود تگ form قابل مشاهده نیست.</p>

<p>همچنین باید بدانید که عرض پیشفرض این فیلد 20 کاراکتر است</p>

</body>

</html>

مشاهده ی خروجی در JSBin

نکته: در مورد این فرم باید به دو مورد توجه کرد؛ اولا خود تگ form قابل مشاهده نیست و ثانیا عرض پیشفرض فیلدهای text برابر با 20 کاراکتر است.(ایران گستر)

حالت `<"input type="radio>`

این نوع از type یک radio button را تعریف می کند. این نوع دکمه ها به کاربر اجازه می دهند که از بین چند گزینه تنها یک گزینه را انتخاب کند. در مثال زیر از کاربر خواسته ایم که جنسیت خود را به ما بگوید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Radio Buttons</h2>

<form>

<input type="radio" name="gender" value="other"> نمیخواهم اعلام کنم

</form>

</body>

</html>

مشاهده ی خروجی در JSBin

حالت `<"input type="submit>`

در این نوع type، دکمه ای برای ارسال نهایی فرم به form-handler ایجاد می شود. form-handler ها در اکثر اوقات صفحات اسکریپت نویسی شده ای هستند که اطلاعات کاربر را پردازش می کنند. این صفحات در attribute ای به نام action آدرس دهی می شوند. به مثال زیر نگاه کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>HTML Forms</h2>

First name:<br>

<br>

Last name:<br>

</form>

<p dir='rtl'>اگر بر روی دکمه ی submit کلیک کنید اطلاعات فرم به صفحه ی "https://www.w3schools.com/action_page.php" ارسال می شود</p>

</body>

</html>

مشاهده ی خروجی در JSBin

پیامی که پس از ثبت فرم به شما نشان داده می شود توسط سرور و پس از بررسی داده ها تولید شده است.(ایران گستر)

وظیفه ی action

attribute ای به نام action در تمام فرم ها وجود دارد (به غیر از موارد معدودی که استثناء هستند) و تعیین می کند که پس از ثبت نهایی فرم و ارسال آن چه اتفاقی بیفتد. البته خودِ action کاری انجام نمی دهد بلکه فرم و اطلاعاتش را به صفحه ی اسکریپتی هدایت می کند تا پردازش شود و عکس العملی نشان دهد.(ایران گستر)

در مثال بالا، فرم به صفحه ای به نام action_page.php ارسال شد که شامل اسکریپت های server-side (مانند PHP یا ASP.NET و …) است:(ایران گستر)

1	<form action="/action_page.php">

نکته: اگر action را کاملا حذف کنید، فرم به همان صفحه ای که در آن هستید ارسال می شود.(ایران گستر)

وظیفه ی target

target تعیین می کند که پس از ارسال فرم، پاسخ در یک سربرگ جدید در مرورگر باز شود، در یک frame دیگر باز شود، در همان صفحه باز شود و الی آخر. مقدار پیش فرض آن self_ است که می گوید فرم در همین پنجره ارسال شود اما اگر می خواهید در یک پنجره ی جدید باز شود باید از blank_ استفاده کنید.(ایران گستر)

مثال:

<!DOCTYPE html>

<html>

<body>

<h2>The target Attribute</h2>

<p>When submitting this form, the result will be opened in a new browser tab:</p>

First name:<br>

<br>

Last name:<br>

</form>

</body>

</html>

مشاهده ی خروجی در JSBin

مقادیر مجاز دیگر parent_ و top_ و یا نام یک iframe هستند.(ایران گستر)

وظیفه ی method

در فرم ها یک attribute بسیار مهم دیگری به نام method (به معنی «روش») وجود دارد. در واقع این attribute روش یا متد ارسال اطلاعات را مشخص می کند که یا می تواند GET باشد و یا POST.(ایران گستر)

مثالی از متد GET:

<!DOCTYPE html>

<html>

<body>

<h2>The method Attribute</h2>

<p>This form will be submitted using the GET method:</p>

First name:<br>

<br>

Last name:<br>

</form>

<p>پس از ثبت فرم به نوار آدرس مرورگر نگاه کنید. اطلاعات ثبت شده را در آنجا می بینید</p>

</body>

</html>

مشاهده خروجی در JSBin

مثالی از متد POST:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The method Attribute</h2>

<p>This form will be submitted using the GET method:</p>

First name:<br>

<br>

Last name:<br>

</form>

<p>پس از ثبت فرم به نوار آدرس مرورگر نگاه کنید. هیچ اطلاعاتی در آنجا دیده نمی شود</p>

</body>

</html>

مشاهده خروجی در JSBin

تفاوت GET و POST چیست؟

حالت پیش فرض مرورگر برای ارسال اطلاعات حالت GET است اما زمانی که از GET استفاده می شود تمام اطلاعات ثبت شده در نوار آدرس مرورگر نمایان خواهند بود (رجوع کنید به دو مثال بالا):(ایران گستر)

1	/action_page.php?firstname=Mickey&lastname=Mouse

نکاتی در مورد GET:(ایران گستر)

داده های فرم را به صورت جفت های name/value در URL قرار می دهد
طول این URL محدود است (حدود 3000 کاراکتر)
هیچ گاه برای ارسال اطلاعات حساس مانند رمز عبور از GET استفاده نکنید چرا که در نوار آدرس مرورگر قابل مشاهده خواهد بود
مناسب برای کاربرانی که می خواهند نتایج را Bookmark کنند
GET معمولا مناسب موقعیت هایی است که هیچ اطلاعات حساسی در آن رد و بدل نمی شود، مانند query string های گوگل زمانی که چیزی را در آن سرچ می کنید

اما اگر داده های شما حاوی اطلاعات مهم، شخصی، حساس و … است حتما باید از POST استفاده کنید. این متد داده های شما را در نوار آدرس نشان نمی دهد

نکاتی در مورد POST:

POST هیچ محدودیت اندازه ای ندارد و می توانید از طریق آن حجم بزرگی از داده ها را ارسال کنید
نتایجی که با POST ارسال شوند قابل bookmark شدن نخواهند بود

وظیفه ی name

هر فیلد ورودی (input) باید یک name داشته باشد و اگر فیلدی آن را نداشته باشد، داده های درون آن فیلد اصلا ارسال نمی شوند.(ایران گستر)

در مثال زیر می توانید ببینید که تنها Last name ثبت و ارسال می شود:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The name Attribute</h2>

First name:<br>

<br>

Last name:<br>

</form>

</body>

</html>

جمع کردن داده در فرم ها

عنصر <fieldset> داده های مرتبط با هم را در یک گروه جمع می کند. تگ <legend> نیز توضیحی درباره ی <fieldset> ارائه می کند. به مثال زیر دقت کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Grouping Form Data with Fieldset</h2>

<p>The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.</p>

<legend>Personal information:</legend>

First name:<br>

<br>

Last name:<br>

</fieldset>

</form>

</body>

</html>

مشاهده خروجی در JSBin

fateme جمعه 26 مهر 1398 ساعت 11:45

0 نظر

آموزش گام به گام و تصویری HTML قسمت بیستم و یکم (ایران گستر)

HTML

[caption id="attachment_3063" align="aligncenter" width="255"] HTML

HTML[/caption]

آشنایی با XHTML

به زبان ساده، XHTML همان HTML است که به صورت XML نوشته شده باشد.(ایران گستر)

XHTML مخفف EXtensible HyperText Markup Language و به معنی «زبان امتدادپذیر نشانه‌گذاری فرامتنی» است اما نگذارید این اسم های قلمبه و سلمبه شما را فریب دهد! XHTML دقیقا مانند HTML نوشته می شود اما قوانین سخت گیرانه تری دارد و همانطور که گفتیم انگار می خواهیم HTML را به صورت یک برنامه ی XML بنویسیم. همچنین قابل ذکر است که XHTML توسط تمام مرورگر های مطرح پشتیبانی می شود.(ایران گستر)

چرا XHTML ؟

بسیاری از صفحات وب دارای HTML بد و غیر معتبر هستند. به طور مثال کد HTML زیر در تمام مرورگر ها کار می کند اما از نظر فنی غیر صحیح است:(ایران گستر)

<html>

<head>

<body>

<h1>Bad HTML

<p>This is a paragraph

</body>

به نظر شما مشکل کد بالا چیست؟

کد بالا در وهله ی اول هیچ DOCTYPE ای ندارد و مشخص نکرده است که از چه ورژنی از HTML استفاده می کند. همچنین تگ <html> را در آخر سند بسته نشده است و هیچ تگ پایانی را مشاهده نمی کنیم. این اتفاق برای تگ های <head> و <h1> و <p> نیز اتفاق افتاده است.(ایران گستر)

این کد HTML کاملا غیر معتبر و غیر صحیح است اما در اکثر مرورگر های وب بدون مشکل به نمایش در می آید چرا که خود مرورگر ها متوجه اشکالات می شوند و آن ها را در هنگام نمایش تصحیح می کنند. اما این مسئله برای مرورگر های تلفن های همراه اتفاق نمی افتد. معمولا گوشی های هوشمند آنقدر پیشرفته نشده اند که هر نوع خطایی را متوجه شوند و تصحیحش کنند. بنابراین علاوه بر ضربه خوردن از جهت سئو، ممکن است کاربران تلفن های هوشمند نتوانند سایت شما را ببینند و کاربران زیادی را از دست بدهید.(ایران گستر)

از طرفی XML نوعی زبان نشانه گذاری است که در آن باید قوانین نشانه گذاری را به طور کامل رعایت کرد. همانطور که حدس می زنید ترکیب XML و HTML همان XHTML می باشد.(ایران گستر)

خصوصیات XHTML

برخی از مهم ترین خصوصیات زبان XHTML از این قرار اند:(ایران گستر)

تعریف DOCTYPE در این زبان اجباری است
تعریف attribute ای به نام xmlns در <html> اجباری است
وجود داشتن تگ های <html> و <head> و <title> و <body> در یک سند اجباری است
عناصر XHTML باید به صورت کاملا صحیح nest شوند (تو در تو قرار بگیرند)
تمام عناصر XHTML باید همیشه بسته شوند (تگ پایانی)
تمام عناصر XHTML باید با حروف کوچک نوشته شوند
اسناد XHTML باید حتما یک عنصر root (ریشه ای) داشته باشند
نام attribute ها باید همیشه با حروف کوچک نوشته شود
مقدار attribute ها باید در Quotation قرار بگیرد
خلاصه سازی attribute ها غیر مجاز است.

1- خلاصه سازی attribute ها یعنی مواردی مثل مورد زیر:(ایران گستر)

اگر به جای نوشتن <"option selected="selected> بنویسید <option selected> می گوییم attribute (در اینجا selected) را خلاصه کرده اید.

می خواهیم این موارد را به صورت خلاصه بررسی کنیم.(ایران گستر)

اعلام DOCTYPE

یک سند XHTML باید علاوه بر DOCTYPE شامل تگ های <html> و <head> و <title> و <body> باشد.

یک نمونه سند صحیح به این شکل است:(ایران گستر)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Title of document</title>

</head>

<body>

some content

</body>

</html>

DOCTYPE ای که در بالا می بینید، نحوه ی اعلام DOCTYPE به عنوان XHTML است.

تو در تو بودن (nesting)

در زبان HTML بعضا می توانیم اشتباها عناصر را nest کنیم:(ایران گستر)

1	<b><i>This text is bold and italic</b></i>

در این کد تگ های پایانی جا به جا بسته شده اند.

اما در XHTML باید کاملا صحیح nest شوند:

1	<b><i>This text is bold and italic</i></b>

تگ های پایانی

در HTML این کد غلط است:(ایران گستر)

1 2	<p>This is a paragraph <p>This is another paragraph

و این حالت صحیح است:(ایران گستر)

1 2	<p>This is a paragraph</p> <p>This is another paragraph</p>

حتی تگ هایی که در HTML تگ پایانی ندارند باید در XHTML بسته شوند. در HTML این تگ ها به این صورت هستند:(ایران گستر)

A break: <br>

A horizontal rule: <hr>

An image: <img src="happy.gif" alt="Happy face">

اما در XHTML باید به این شکل نوشته شوند:

A break: <br />

A horizontal rule: <hr />

An image: <img src="happy.gif" alt="Happy face" />

همچنین همیشه باید تگ هایتان با حروف کوچک باشند بنابراین کد زیر غلط است:(ایران گستر)

<BODY>

<P>This is a paragraph</P>

</BODY>

حالت صحیح این کد به این صورت است:(ایران گستر)

<body>

<p>This is a paragraph</p>

</body>

Attribute ها

کوچک بودن حروف برای attribute ها نیز صدق می کند، بنابراین کد زیر غلط است:(ایران گستر)

1	<table WIDTH="100%">

و شکل صحیح آن بدین صورت است:

1	<table width="100%">

همچنین باید مقدار این attribute ها در quotation باشد. کد زیر غلط است:(ایران گستر)

1	<table width=100%>

و شکل صحیح آن بدین صورت است:

1	<table width="100%">

خلاصه سازی attribute ها نیز غیر مجاز است. به نمونه های صحیح و غلط زیر نگاه کنید.(ایران گستر)

کد غلط:

1	<input type="checkbox" name="vehicle" value="car" checked />

حالت صحیح آن:(ایران گستر)

1	<input type="checkbox" name="vehicle" value="car" checked="checked" />

کد غلط:(ایران گستر)

1	<input type="text" name="lastname" disabled />

حالت صحیح آن:(ایران گستر)

1	<input type="text" name="lastname" disabled="disabled" />

سوال: چطور می توانیم از HTML به XHTML مهاجرت کنیم؟(ایران گستر)

پاسخ: ابتدا باید یک DOCTYPE برای XHTML بنویسید و DOCTYPE قبلی را حذف کنید. سپس attribute ای به نام xmlns را به خودِ عنصر html اضافه کنید. سپس نام تمامی عناصر را با حروف کوچک بنویسید و این کار را با attribute ها نیز انجام دهید. در آخر تگ های خالی (تگ هایی که تگ پایانی ندارند) را ببندید و برای مقادیر attribute ها Quotation قرار دهید.(ایران گستر)

یک مثال از یک سند XHTML برای شما آورده ام:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"DTD/xhtml1-strict.dtd">

<head>

<title> Strict DTD XHTML Example </title>

</head>

<body>

<p>

Please Choose a Day:

<option selected="selected">Monday</option>

<option>Tuesday</option>

<option>Wednesday</option>

</select>

</p>

</body>

</html>

مشاهده ی خروجی در JSBin

با نگاهی به این سند کوتاه متوجه می شوید که تمام موارد بالا در آن رعایت شده است.(ایران گستر)

fateme جمعه 26 مهر 1398 ساعت 11:45

0 نظر

287
1
...
44
45
صفحه 46
47
48
...
58

حقوقی

جدیدترین یادداشت‌ها

بایگانی

جستجو

آموزش گام به گام و تصویری HTML قسمت بیستم و پنجم (ایران گستر)

HTML

Input های HTML5

Input های رنگی

Input های تاریخ

Input های Datetime-local

Input های ایمیل

Input های فایل

Input های ماه

Input های عددی

Input های محدوده

Input های جست و جو

Input های تلفن

Input های زمان

Input های URL

Input های هفته

آموزش گام به گام و تصویری HTML قسمت بیستم و چهارم (ایران گستر)

HTML

Input های رایج و قدیمی

Input های متنی

Input های رمز عبور

Input های ارسال فرم

Input های پاک کردن فرم

Input های radio

Input های Checkbox

Input های دکمه ای

آموزش گام به گام و تصویری HTML قسمت بیستم و سوم (ایران گستر)

HTML

عنصر <input>

عنصر <select>

عنصر <textarea>

عنصر <button>

عناصر HTML5

آموزش گام به گام و تصویری HTML قسمت بیستم و دوم (ایران گستر)

HTML

عنصر <form>

عنصر <input>

حالت <"input type="text>

حالت <"input type="radio>

حالت <"input type="submit>

وظیفه ی action

وظیفه ی target

وظیفه ی method

تفاوت GET و POST چیست؟

وظیفه ی name

جمع کردن داده در فرم ها

آموزش گام به گام و تصویری HTML قسمت بیستم و یکم (ایران گستر)

HTML

آشنایی با XHTML

چرا XHTML ؟

خصوصیات XHTML

اعلام DOCTYPE

تو در تو بودن (nesting)

تگ های پایانی

Attribute ها

حالت `<"input type="text>`

حالت `<"input type="radio>`

حالت `<"input type="submit>`