ایجاد یک فرم HTML و ویژگی تکمیل خودکار فرم ها
1397/05/24 09:43 , بهزاد ناظمی

ایجاد یک فرم HTML و ویژگی تکمیل خودکار فرم ها

معرفی

در این مقاله، نحوه ایجاد فرم با استفاده از جداول HTML را خواهید دید. اولا ما یاد می گیریم که چگونه کنترل هایی مانند TextBox و DropDownList ایجاد کنیم، سپس از آنها در جدول استفاده می کنیم تا یک فرم را در جایی که اطلاعات کاربر ذخیره می شود ایجاد کنیم سپس ویژگی ورودی تکمیل خودکار فرم ها HTML را توضیح خواهم داد.

 

فرمت جدول

<table border="1"cellpadding="10px" cellspacing="5px">  
<tr>  
<td>row1 , cell1 </td>  
<td>row1 , cell2 </td>  
</tr>  
<tr>  
<td>row2 , cell1 </td>  
<td>row2 , cell2 </td>  
</tr>  
</table> 

جعبه حروف

<form>  
Name: <input type="text" name="Name" /><br />  
Father's Name: <input type="text" name="FatherName" />  
</form>  

قسمت کلمات

<textarea rows="20"cols="40">  
Write discription here.  
</textarea>  

 کادر فهرست

<select name="list1"id="Select" size="2" multiple="multiple">  
<option value="1">item1</option>  
<option value="2">item2</option>  
<option value="0">All</option>  
</select>  

جعبه انتخاب

<form action="">  
<input type="checkbox" name="Car" value="Honda" /> I have Honda car. <br />  
<input type="checkbox" name="Car" value="Maruti" /> I have a Maruti car.   
</form>  

لیست کشویی

<form action="">  
<select name="City">  
<option value="Delhi">Delhi</option>  
<option value="Jaipur">Jaipur</option>  
<option value="Udaipur" selected="selected">Udaipur</option>  
</select>  
</form> 

 دکمه

<form action="">  
<input type="button" value="Click me!">  
</form> 

اکنون ما از همه آنها برای ایجاد یک فرم به این شکل استفاده می کنیم

<body>   
<form id="form1" runat="server">  
<div>                
</div>   
<h2 align="center"> Job Details:</h2>  
<table id="table1"; cellspacing="5px" cellpadding="5%"; align="center">  
<tr>  
<td  align="right" class="style1">Job Title:</td>  
<td class="style1"><input type="text" name="Job Title" /></td>  
</tr>  
<tr>  
<td align="right">Description:</td>  
<td><textarea rows="3" cols="15" name="Description"></textarea>  
<p>Brief Description should have atmost 500 characters</p>  
</td>  
</tr>  
<tr>  
<td align="right">Company Name:</td>  
<td><input type="text" name="Company Name" /></td>  
</tr>  
<tr>  
<td align="right">Contact number:</td>  
<td><input type="text" name="Contact number" /></td>  
</tr>  
<tr>  
<td align="right">Contact person:</td>  
<td><input type="text" name="Contact person" /></td>  
</tr>  
<tr>  
<td valign="top" align="right">Email:</td>  
<td><input type="text" name="Email" /></td>  
</tr>  
<tr>  
<td align="right">Work Status</td>  
<td><input type="checkbox" name="vehicle" value="Bike" />Full Time  
<input type="checkbox" name="vehicle" value="Bike" /> Part Time  
<input type="checkbox" name="vehicle" value="Bike" />Per Dim  
<input type="checkbox" name="vehicle" value="Bike" />Others  
</td>  
</tr>  
<tr>  
<td align="right">Salary</td>  
<td><input type="text" name="Email" />  
<select name="cars">  
<option value="Rupees">Rupees</option>  
<option value="Euro">Euro</option>  
<option value="US Dollar" selected="selected">US Dollar</option>  
</select>  
<select name="time">  
<option value="Yearly" selected="selected">Yearly</option>  
<option value="Half Yearly">Half Yearly</option>  
</select>                  
</td>  
</tr>  
<tr>  
<td align="right">Experience(Years)</td>  
<td><input type="text" name="Experience" /></td>  
</tr>  
<tr>  
<td align="right">Locations</td>  
<td><input type="text" name="locations" /></td>  
</tr>  
<tr>  
<td align="right">Qualifications:</td>  
<td>  
<select name="drop1" size="4" id="Qualifiation" size="4" multiple="multiple" >  
<option value="1" >Any</option>  
<option value="2">High School</option>  
<option value="3">Associate</option>  
<option value="4">Pre Bachelors</option>  
<option value="5">Bachelors</option>  
</select>  
<input type="button" value="ADD>>" /><input type="button" value="<<Remove"/>  
<select name="drop2" id="SelectedQualifiation" size="4" multiple="multiple">  
<option value="1">Any</option>  
</select></br>  
</td>  
</tr>         
<tr>  
<td> <input type="button" value="Submit" align="right"/>  
<td> <input type="button" value="Reset" />         
</td>  
</tr>  
</table>   
</form>  
</body>  

در نهایت، خروجی ما به نظر می رسد مثل این است:

  

کار با ویژگی تکمیل خودکار فرم ها در  HTML5

صفات ورودی های HTML

صفات به معنای یک واحد کوچک از یک موجودی است.

 مقادیر ارزشمند -->  مقدار ورودی را مشخص می کند.

مقادیر تنها قابل خواندن --> مقادیر ورودی که قابل تغییر نیست، اما می توانیم آن را بخوانیم.

مقادیر غیر فعال --> مقادیر را نمی توان در فرم ها استفاده کرد.

اندازه مقادیر --> اندازه شخصیت ها را مشخص می کند.

حداکثر طول مقادیر --> بستگی به طول ورودی دارد.

 

ویژگی های تکمیل خودکار HTML

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

SYNTAX

<input autocomplete="on|off">

<!DOCTYPE html>  
<html>  
<body><title> autocomplete</title>      
<form action="/blogs.php" autocomplete="on">  
Name:<input type="text" name="name1"><br>  
Department:<input type="text" name="name2"><br>  
E-mail:<input type="email" name="email" autocomplete="off"><br>  
<input type="submit">  
</form>  
</body>  
</html> 

ATTRIBUTES

VALUE

DESCRIPTION

Autocomplete

On or Off

Check whether the autocomplete option is enabled or not, in the input elements.

 

صفحه کامپایل شده به شکل زیر به نظر می رسد.

 

خروجی

 

 

برگرفته از : https://www.c-sharpcorner.com

  

جالب است بخوانید

طرز تبدیل HTML به WordPress

بهترین قالب های رایگان HTML5 و CSS3

9 چیز که باید در مورد HTML5 بدانید

Shell Scripting چیست و چرا باید از آن استفاده کرد؟

 

 

 

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات