فرم ها در html
تگ form
تگ فرم برای ایجاد قابلیت های تعاملی (دکمه، فیلدهای متنی، امکان آپلود فایل و…) و برای دریافت ورودی از سمت کاربر در صفحات html استفاده می شود. تگ form به تنهایی کاربردی ندارد و با خصوصیاتی مانند action و تگ های input داخل آن بکار برده می شود.
خاصیت action در form :
از آنجایی که اطلاعات یک فرم html پس از تکمیل شدن باید به یک فایل در سرور ارسال شود، خاصیت action برای تعیین آدرس فایل مقصد مورد استفاده قرار می گیرد.
خاصیت method در form :
خاصیت method شیوه ارسال اطلاعات را مشخص می کند. که به یکی از دو شکل post یا get (حالت پیش فرض) می باشد، در متد post، اطلاعات به صورت پنهانی در پس زمینه به سرور ارسال می شوند اما در متد get، اطلاعات در نوار آدرس مرورگر قابل مشاهده هستند و به صورت پارامترهایی به همراه مقادیر به سرور ارسال می شوند. متد post برای ارسال مقادیر طولانی، اطلاعات حساس کاربری، آپلود فایل و… کاربرد دارد و متد get بیشتر برای ارسال اطلاعات کوتاه ، جستجو و اطلاعاتی با حساسیت کمتر به کار می رود.
همان طور که گفته شد، تگ form به تنهایی قابلیت خاصی در اختیار کاربران قرار نمی دهد و با تگ های input ، select ،text area و .. که زیر مجموعه های این تگ می باشند کارایی پیدا می کند.
- تگ input: ای تگ شامل خاصیت هایی می شود که برای ایجاد دکمه های رادیویی، دکمه ارسال، فیلدهای متنی (متن کوتاه) ، فیلدهای مربوط به رمز عبور، فیلد آپلود فایل و… کاربرد دارد.
- تگ select: این تگ در کنار تگ option برای ایجاد منوهای بازشونده و انتخاب یک یا چند مورد استفاده می شود.
- تگ textarea: این تگ برای دریافت متن های طولانی بکار برده می شود.
تگ input
این تگ با تنظیم type های مختلف برای آن می توان انواع مختلفی از امکانات از قبیل فیلد متنی (text)، فیلد رمز عبور (password)، دکمه معمولی (button)، دکمه ارسال (submit) و … را ایجاد کرد.
<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">نوع text
بیشترین و رایج ترین نوع مورد استفاده نوع trxt می باشد که یک فیلد تک خطی است که کاربر می تواند داخل آن اطلاعات وارد کند.
<form action="users/get.php" method="get">
<input type="text" name="firstname">
</form>نوع password
از این نوع برای ایجاد فیلدهای رمزعبوراستفاده می شود. مقادیری که در این فیلد نمایش داده میشوند به صورت ستاره یا دایره نشان داده می شوند.
<form action="users/get.php" method="get">
<input type="password" name="password" />
</form>نوع button
برای ایجاد دکمه های ساده به کار می رود، یک دکمه معمولی باید به همراه دستورات جاوا اسکریپت تکمیل شود در غیر این صورت به خودی خود کاربردی ندارد.
<form action="users/get.php" method="get">
<input type="button" value="دکمه" onclick="alert('دکمه در تگ فرم باید با دستورات جاوا اسکریپت تکمیل شود')" />
</form>نوع submit
از این نوع برای ایجاد دکمه ارسال اطلاعات فرم استفاده می شود.
<form action="users/get.php" method="get">
<input type="submit" value="ارسال" />
</form>نوع reset
این نوع برای ایجاد یک دکمه که با کلیک بر روی آن اطلاعات فیلدها به حالت پیش فرض خود برمی گردد بکار برده می شود.
<form action="users/get.php" method="get">
<input type="reset" value="نوشتن از نو" />
</form>نوع checkbox
از این نوع به همراه تگ input برای ایجاد چک باکس بکار برده می شود.
<form action="users/get.php" method="get">
<input type="checkbox" checked="checked" name="choose" value="1"/>
</form>نوع file
برای آپلود یک فایل به سرور استفاده می شود.
<form action="users/get.php" method="get" enctype="multipart/form-data">
<input type="file" name="file-name" accept="image/gif,image/jpg,application/pdf" />
</form>برای اینکه این نوع به درستی عمل کند، باید خاصیت enctype را با مقادیر multipart/form-data به تگ form اضافه کنیم.
نکته: پارامتر اختیاری accept مشخص کننده فرمت های مجازی است که از طریق فیلد، قابل آپلود هستند، این فرمت ها بر اساس استاندارد MIME یا (Multipurpose Internet Mail Extensions) مشخص می شوند. لیست کامل از فرمت ها و معادل آنها در استاندارد MIME
نوع hidden
برای ارسال فیلدهای مخفی به سمت سرور بکار برده می شود.
<form action="users/get.php" method="get">
<input type="hidden" name="hidden-name" value="13" />
</form>نوع radio
از این نوع برای ساخت دکمه های رادیویی در فرم های وب استفاده می شود.
<form action="users/get.php" method="get">
<input type="radio" name="radio-box" value="1" />
</form>تگ select در form
از این تگ برای ایجاد یک منوی کشویی که دارای چند گزینه باشد در صفحات html استفاده می شود. برای ساختن گزینه های انتخابی از تگ زیرمجموعه آن یعنی option استفاده می شود.
<form action="users/get.php" method="get">
<select name="select-option">
<option value="0" selected="selected">انتخاب کنید</option>
<option value="1">html</option>
<option value="2">css</option>
<option value="3">java script</option>
</select>
</form>در حالت عادی در هر تگ select کاربران مجاز به ارسال تنها یک مقدار می باشند، برای اجازه ارسال چندین مقداردر این تگ، باید خاصیت multiple را به آن اضافه کنیم.
<form action="users/get.php" method="get">
<select name="select-option[]" multiple="multiple">
<option value="0" selected="selected">انتخاب کنید</option>
<option value="1">html</option>
<option value="2">css</option>
<option value="3">java script</option>
</select>
</form>تگ textarea در form
از این تگ جهت ایجاد فیلدهای متنی طولانی بکار برده می شود، به عنوان مثال برای وارد کردن یادداشت، ارسال مطلب، نمایش یک متن کپی رایت و… کاربرد دارد.
<form action="users/get.php" method="get">
<textarea name="your-text" cols="50" rows="8">
</textarea>
</form>از خاصیت cols برای تعیین عرض(اندازه ستون ها) و از خاصیت rows برای تعیین ارتفاع(تعداد سطرها) استفاده می شود.
استفاده از label در form
برای ایجاد برچسب های استاندارد در فرم ها از تگی با نام label استفاده می شود، label در واقع نقش معرف و برچسب را برای تگ های فرم ایفا می کند.
<form action="users/get.php" method="get">
<label for="your-text">یادداشت:</label>
<textarea name="your-text" cols="50" rows="8" id="your-text"
</textarea>
</form>برای هر فیلدی که قصد تعریف برچسب داریم، یک id تعریف کرده و با خاصیت for برچسب را به آن نسبت می دهیم.
0 کامنت