کار با فرم ها در HTML

در این قسمت از آموزش HTML به بحث فرم ها می پردازیم. کار با فرم ها در HTML و طراحی سایت بسیار مهم است.

اگر بخواهید یک سایت حرفه ای داشته باشید حتما باید از فرم ها استفاده کنید.

کاربرد فرم ها در HTML :

فرم ها در چندین جای سایت استفاده می شود.

از فرم ها در html برای ورود اطلاعات کاربر استفاده می شود. مثلا فرم ثبت نام .فرم ورود به حساب کاربری . فرم نظرخواهی و غیره.

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

اطلاعاتی که وارد فرم ها می شود می تواند در بحث امنیت سایت و هک شدن یا نشدن سایت تاثیرگذار باشد. نباید اطلاعات کاربر را بدون اعتبارسنجی ذخیره کرد. در مورد امنیت سایت و بحث هک شدن یا نشدن سایت بعدا بحث خواهیم کرد. این مورد را در آموزش PHP بحث می کنیم.

فرم ها با تگ FORM ایجاد می شوند. تگ FORM ، تگ باز و بسته دارد.

در فرم از انواع ورودی ها (INPUT) استفاده می شود مانند text fields, checkboxes, radio buttons, submit buttons و غیره.

تگ INPUT در فرم :

تگ input دارای حالت های مختلف می باشد. در این بخش با انواع ورودی ها آشنا خواهید شد.

<form action="/action_page.php" method="get">

تگ input نوع text :

از نوع text برای ورود متن های کوتاه استفاده می شود. مثلا برای ورود نام یا نام خانوادگی.

از نوع radio برای ورود یک گزینه استفاده می شود. مثل مجرد ، متاهل . که می توانید یکی را انتخاب کنید.

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

<form>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

تگ textarea :

از تگ textarea برای ورود اطلاعات زیاد استفاده می شود. تگ textarea یکی از تگ های مهم در فرم ها هستند و دارای ویژگی های مختلفی هستند.

ویژگی name در تگ textarea برای قرار دادن نام استفاده می شود. از نام های مناسب استفاده کنید.

ویژگی rows در تگ textarea : از ویژگی rows برای تعداد سطرها استفاده می شود.

ویژگی cols در تگ textarea : ازویژگی cols برای تعداد ستون استفاده می شود.

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

ویژگی action فرم :

از ویژگی action برای ارسال اطلاعات فرم به صفحه ای خاص استفاده می شود. معمولا این گزینه در هنگام استفاده از php کاربرد دارد. مثلا اطلاعات به صفحه a.php برود و در آنجا اطلاعات در بانک اطلاعات یا پایگاه داده ذخیره شود.

ویژگی method در فرم :

از ویژگی method در هنگام ارسال اطلاعات استفاده می شود . این مبحث را در آموزش php بحث خواهیم کرد.

تگ select :

از تگ select برای ایجاد یک لیست (drop-down list) استفاده می شود. در مثال زیر نحوه استفاده از لیست ها را با تگ select یاد می گیرید.

عناصرoption  ، تمام عناصری هستند که باید انتخاب شوند. به طور پیش فرض، اولین مورد در لیست کشویی انتخاب شده است.برای تعریف یک گزینه پیش انتخاب شده، ویژگی selected  را به گزینه اضافه کنید.

با استفاده از size مشخص میکنیم که چه تعداد گزینه نمایش داده شود.

با گزینه multiple نوع نمایش لیست را تغییر می دهیم.

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

تگ button :

برای تعریف یک دکمه از تگ button استفاده میکنیم.

<button type="button">Click Me</button>

تگ password :

از تگ password برای ایجاد ورودی پسورد یا رمز بور استفاده می شود . وقتی کاربر اطلاعاتی را وارد می کند اطلاعات نمایش داده نمیشود و بجای حروف و عدد ، یک علامت دایره توپر نمایش داده می شود.

<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="psw">
</form>

تگ Checkbox :

از تگ checkbox برای انتخاب عناصر استفاده می شود . مثلا می توانیم چند رنگ مورد علاقه را انتخاب کنیم. یا تخصص های خود را در یک فرم انتخاب کنیم.

انواع ورودیHTML5  :

در html5 نیز چندین ورودی اضافه شده است که در زیر می بینید.

color

date

datetime-local

email

month

number

range

search

tel

time

url

week

 


نویسنده : هدایت عباسی

ثبت نظر