فرم ها در HTML

یکی از مهمترین مباحث HTML ، فرم ها هستند.

فرم ها به توسعه دهندگان وب این امکان را می دهند تا اطلاعاتی را درباره کاربر جمع آوری کنند.

مثالی از فرم ها در HTML : 

<form>
   <input type="password" placeholder="Enter your Password">
   <input type="email" placeholder="Enter your Email">
</form>

برای ایجاد یک فرم ، باید از تگ form استفاده کنید.

در بخش زیر نحوه نوشتار تگ form را مشاهده می کنید :

<form>
   content form ...
</form>

تگ input

المان input پر استفاده ترین المان فرم است.

این المان یک محفظه برای جمع آوری اطلاعات تعریف می کند.

این المان ویژگی type را دارد ، که نوع input را مشخص می کند.

مثالی از المان input به همراه ویژگی type :

<form>
   <input type="password">
   <input type="email">
</form>

مقادیری که این ویژگی می گیرد بسیار زیاد است که در بخش های بعدی با آنها آشنا خواهید شد.

تگ lable

یکی دیگر از المان های پر استفاده در تگ form ، المان lable است.

این المان به توسعه دهندگان وب این امکان را می دهد تا یک متن در رابطه با input موردنظر را تعریف کنند.

برای ایجاد ارتباط بین input و lable باید از دو ویژگی استفاده کنید.

ویژگی اول id هستش که باید برای input تعریف کنید.

سپس یک ویژگی for برای تگ lable نیز تعریف کنید. 

نکته: ویژگی for باید با ویژگی id برابر باشد.

 مثالی از وصل شدن المان lable به المان input را مشاهده می کنید :

<form>
   <lable for="password">password : </lable>
   <input type="password" id="password">
</form>

ارسال اطلاعات

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

برای ارسال اطلاعات ، توسط یک input باید ویژگی type را برابر با مقدار submit قرار دهیم.

مثالی از فرستادن اطلاعات یک فرم :

<form>
   <lable for="password">password : </lable>
   <input type="password" id="password">
   <input type="submit">
</form>

خلاصه درس

در این درس با فرم ها آشنا شدید.

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

همچنین متوجه شدید برای ایجاد محفظه ای ، برای پر کردن اطلاعات کاربر ، باید از المان input استفاده کنید.

در ادامه با المان lable که یک متن را با محفظه اطلاعات متصل می کرد ، آشنا شدید.

تمرین

در مثال زیر یک input را به المان lable وصل کنید.

<input ="password" ="password-name">
<lable for=" ">password : </lable>
مشاهده پاسخ
توسعه دهندگان
احسان اسلامی