گروه آموزش طراحی سایت 18 خرداد 1392 1 833 بازدید آموزش HTML

در سلسله آموزشهای طراحی سایت آنلاینر به معرفی کامل Checkbox, radio, select-option, textarea پرداختیم.

در این مقاله قصد بررسی معرفی input- password, input-file, hidden fields , button, image button, hidden fields, label tag را داریم.

input- password:

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

</pre>
<form>رمز ورود: <input style="background-image: url('data:image/gif;base64,R0lGODlhEAAQAPZVADsBAkECBFEGCmQDBGoEB3UIDWcOEn0dHnZGRnhBQntbXIILEoIMEoENFI8QGI0UHJMQGKERGqURGq4QGIsaIZ4fJq8WI68YJrQXJLIZJbgZJ7gZKLwcK74dLa4gKq4iLLUgLaApMLwpNrwsOKUzOcAfL8EhMcUjM8YkNMgoOJw+QKY8QtA5Sdo/T6dARa5FS6tOUr9MUqRRVrRVWY9pa5BmaZBqbMRKVNlRYclud/14iLyIiKuoqNGbneyPmfOAkPeElNGvsNO3t+aorfGjq+y/w8zMzNXU1N3S0t7W1t3a2uLR0e3U1vLd4OLh4ejo6Png4/bx8ff09Pr5+f7+/v///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAFYALAAAAAAQABAAAAfEgFaCVlCFhoWDgzk6QD+Oj0A6OYMyLSwdJR2amywtMoITKZgbFRsYIRqaKROCEpgZO1IkMFM7GJgSghGZKEVVQktVQyclJRG6JR8uM1NVVVEvKx7GyDHO11VUVTHUVgEECUlIR+RHSUoJBAGCAAMHKgpO8koIKgcDAIICCwwGRk89gjzhUYABAwGCGly4IIIIkxE3mvgAkeFCA0EPMBQ7gcNEio7FMDwQVAOCBQ6bNnGwAKHGIBoUHMicKZOCjUQ4cw4KBAA7'); padding-right: 18px; background-repeat: no-repeat; background-attachment: scroll; background-position: right center; border: 1px solid #c01f2f; width: 146px;" type="password" name="pwd" /></form>
<pre>

input-file:

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

</pre>
<form>لطفا فایل مورد نظر خود را برای آپلود انتخاب نمایید:

<input type="file" name="datafile" /></form>
<pre>

hidden fields :

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

</pre>
</form><form><input id="orderNumber" type="hidden" name="orderNumber" value="0024" /></form><form>
<pre>

button :

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

مثال زیر نحوه درج یک دکمه روی صفحه وب را نشان میدهد:

<button onclick="alert('سلام!')" type="button">Click Me!</button>

خروجی این تکه کد بصورت زیر می باشد:

نکته قابل توجه اینست که برای درج یک دکمه احتیاج به تگ form نیست.

image button :

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


My Page

</pre>
<div align="center">

<input type="text" value="نام خود را وارد کنید!" size="25" />

<input type="image" name="image" src="rainbow.gif" /></div>
<pre>

label :

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


My Page

</pre>
<form action="demo_form.asp"><label for="male">مرد</label>
<input id="male" type="radio" name="jender" value="male" />

<label for="female">زن</label>
<input id="female" type="radio" name="jender" value="female" />

<input type="submit" value="Submit" /></form>
<pre>

صفتی به نام for نیز برای تگ label  استفاده میشود که برچسب مورد نظر شما را به فیلد ورودی مربوطه انتساب میدهد.

در آموزش بعد به اسکریپت ها و embed کردن عناصر میپردازیم.

با آنلاینر همراه شوید …