htmlطراحی سایت

جلسه ۱۸: فرم های HTML در html

 

نحوه دریافت ورودی از کاربران صفحه وب خود
موارد زیر را بیان خواهیم کرد

  • بررسی اجمالی
  • ورودی متن
  • ورودی
  • محل ورود متن های بلند
  • دکمه ها
  • ورودی های انتخابی
  • Select box
  • Radio button +checkbox

فرم های HTML محل دریافت ورودی از کاربر در صفحات وب هستند. اگر تا به حال از وبلاگ بازدید کرده اید و نظر خود را گذاشته اید یا از کارت اعتباری خود به صورت آنلاین برای خرید چیزی استفاده کرده اید ، از فرم های HTML برای تعامل با صفحه وب و ورود اطلاعات خود استفاده کرده اید.

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

<html>
 <head>
   <title>Working with HTML Forms</title>
 </head>
 <body>
   <h1>Login Page</h1>
     <form>
   </form>
 </body>
</html>

همانطور که ممکن است متوجه شده باشید ، تنها چیزی که در خروجی وجود دارد عنصر h1 است. به این دلیل که عنصر <form> فقط فرم HTML را به مرروگراعلام می کند.

برای شروع پذیرش ورودی کاربر ، بیایید یک عنصر <input> اضافه کنیم که متن را می پذیرد:

<html>
 <head>
   <title>Working with HTML Forms</title>
 </head>
 <body>
  <h1>Login Page</h1>
  <form>
    <input type=”text” id=”firstTextInput” name=”firstTextInput”>
  </form>
 </body>
</html>

اکنون باید توجه داشته باشید که یک جعبه متن خالی وجود دارد که می توانید با کلیک متن ورودی را وارد کنید. همچنین توجه داشته باشید که عناصر <input> تگ بسته ندارند.

اما داشتن فقط یک جعبه متن نشان نمی دهد که ورودی برای چه کاری استفاده می شود. بیایید یک عنصر <label> اضافه کنیم تا معنی <input> را بهتر نشان دهیم:

<html>
 <head>
   <title>Working with HTML Forms</title>
 </head>
 <body>
  <h1>Login Page</h1>
    <form>
    <label for=”username”>
      Username:
      <input type=”text” id=”username” name=”username”>
    </label>
  </form>
 </body>
</html>

عنصر <label> دارای یک ویژگی for است که <label> را با یک عنصر خاص <input> مرتبط می کند. مقدار ویژگی for باید با مقدار id عنصر <input> مطابقت داشته باشد. عناصر <label> مفید هستند زیرا به شما اجازه می دهند عناصر <input> توسط خوانندگان صفحه شناسایی شود.

اکنون می توانیم یک عنصر <input> اضافی که رمز عبور کاربر را می پذیرد اضافه کنیم و یک <label> برای نشان دادن معنی ورودی اضافه کنیم.

<html>
 <head>
   <title>Working with HTML Forms</title>
 </head>
 <body>
  <h1>Login Page</h1>
    <form>
    <label for=”username”>
      Username:
      <input type=”text” id=”username” name=”username”>
    </label>
    <label for=”password”>
      Password:
      <input type=”password” id=”password” name=”password”>
    </label>
  </form>
 </body>
</html>

 

توجه داشته باشید که اگر در قسمت رمز عبور می نویسید ، متن پنهان است زیرا ما مشخص کردیم که ویژگی نوع <input> دارای مقدار رمز عبور است.

با در نظر گرفتن این مثال ، بیایید غواصی کنیم و به انواع ورودی هایی که می توانیم با فرم های HTML استفاده کنیم ، نگاه کنیم.

ورودی متن
<input>

ما دیده ایم که چگونه عنصر <input> می تواند مقادیر متن را بپذیرد. چندین مقدار مختلف وجود دارد که می تواند مورد استفاده قرار گیرد ، از جمله:

  • text: برای متن ساده
  • password: برای پنهان کردن قسمت ورودی رمز عبور
  • search: برای نشان دادن قسمت متن برای جستجوی یک صفحه / چندین صفحه استفاده می شود
  • url: ورودی را به عنوان آدرس URL تأیید می کند
  • tel: برای وارد کردن شماره تلفن ها
  • email: ورودی را به عنوان آدرس ایمیل تأیید می کند
  • در مورد آدرس و ایمیل ، مرورگر بررسی می کند که آیا ورودی یک URL یا آدرس ایمیل معتبر است.
<html>
 <head>
   <title>Email Validation</title>
 </head>
 <body>
   <form>
     <p>Try inputting text that isn’t email and press ‘Enter'</p>
     <label for=”email”>
       E-mail Address:
       <input type=”email” id=”email” name=”email”>
     </label>
   </form>
 </body>
</html>
<html>
 <head>
   <title>URL Validation</title>
 </head>
 <body>
   <form>
     <p>Try inputting text that isn’t a valid URL and press ‘Enter'</p>
     <label for=”url”>
       URL:
       <input type=”url” id=”url” name=”url”>
     </label>
   </form>
 </body>
</html>

<textarea>

اگر می خواهید کاربر شما بتواند خطوط جدید (با فشار دادن Return) را در ورودی متن خود وارد کند ، می توانید از عنصر <textarea> استفاده کنید:

<html>
 <head>
   <title>Textarea Elements</title>
 </head>
 <body>
   <form>
     <label for=”multiLineInput”>
       <p>This is an input element that can include new lines:</p>
       <textarea id=”multiLineInput”></textarea>
     </label>
   </form>
 </body>
</html>

توجه کنید که عناصر <textarea> چگونه تگ بسته دارند. با استفاده از مشخصه های cols و rows می توانید اندازه <textarea> را نیز تعیین کنید.

<html>
 <head>
   <title>Textarea Elements</title>
 </head>
 <body>
   <form>
     <label for=”multiLineInput”>
       <p>This is an input element that can include new lines:</p>
       <textarea rows=”5″ cols=”50″ id=”multiLineInput”></textarea>
     </label>
   </form>
 </body>
</html>

دکمه ها

هر زمان که می خواهید یک دکمه قابل کلیک برای ایجاد برخی اقدامات در صفحه ایجاد کنید ، باید از عنصر <button> استفاده شود.

<button> تگ ساده است و دارای سه مقدار مختلف است:

submit: داده های فرم را به یک سرور ارسال می کند
reset: تمام داده ها را در فرم فعلی بازنشانی می کند
button: بدون رفتار پیش فرض. این نوع دکمه ها وقتی بحث Javascript را شروع می کنیم مفیدتر خواهد بود.

<html>
 <head>
   <title>Submit Button</title>
 </head>
 <body>
   <form>
     <label for=”firstName”>First Name:</label>
     <input type=”text” name=”firstName” id=”firstName”>
     <label for=”lastName”>Last Name:</label>
     <input type=”text” name=”lastName” id=”lastName”>
     <!– This button will submit the form, causing page to redirect –>
     <button type=”submit”>Submit Name</button>
   </form>
 </body>
</html>
<html>
 <head>
   <title>Reset Button</title>
 </head>
 <body>
   <form>
     <label for=”firstName”>First Name:</label>
     <input type=”text” name=”firstName” id=”firstName”>
     <label for=”lastName”>Last Name:</label>
     <input type=”text” name=”lastName” id=”lastName”>
     <!– This button will reset the form –>
     <button type=”reset”>Reset Name</button>
   </form>
 </body>
</html>
<html>
 <head>
   <title>No-Default Button</title>
 </head>
 <body>
   <form>
     <label for=”firstName”>First Name:</label>
     <input type=”text” name=”firstName” id=”firstName”>
     <label for=”lastName”>Last Name:</label>
     <input type=”text” name=”lastName” id=”lastName”>
     <!– This button does nothing by default –>
     <button type=”button”>Do Nothing</button>
   </form>
 </body>
</html>

ورودی های انتخابی
<select>

برای ایجاد یک گزینه کشویی از مواردی که کاربر می تواند از بین آنها انتخاب کند ، می توانید از عناصر <select> استفاده کنید:

<html>
 <head>
   <title>Selection Inputs</title>
 </head>
 <body>
   <form>
     <label for=”selector”>
       <p>A <code>select</code> element allows users to input from a selection:</p>
       <select id=”selector”>
         <option>Option ۱</option>
         <option>Option ۲</option>
         <option selected>Option ۳</option>
         <option>Option ۴</option>
       </select>
     </label>
   </form>
 </body>
</html>

درج گزینه های آن با تگ <<option میسر است.

علاوه بر این ، اگر می خواهید گزینه ها را در دسته های مختلف گروه بندی کنید ، می توانید عناصر <option> را در یک عنصر <optgroup>  قرار دهید:

<html>
 <head>
   <title>Selection Inputs</title>
 </head>
 <body>
   <form>
     <label for=”selector”>
       <p>A <code>select</code> element allows users to input from a selection:</p>
       <select id=”selector”>
         <optgroup label=”Group ۱″>
           <option>Option ۱</option>
           <option>Option ۲</option>
         </optgroup>
         <optgroup label=”Group ۲″>
           <option>Option ۳</option>
           <option>Option ۴</option>
         </optgroup>
         <optgroup label=”Group ۳″>
           <option>Option ۵</option>
           <option>Option ۶</option>
         </optgroup>
       </select>
     </label>
   </form>
 </body>
</html>

radio button +checkbox <input>

عنصر <input> مقادیر نوع دیگری دارد که ورودی های غیر از متن را می پذیرد. به عنوان مثال ، از radio button می توان برای ایجاد لیستی از گزینه ها استفاده کرد که فقط می خواهید یک گزینه انتخاب شود:

<html>
 <head>
   <title>Radio Buttons</title>
 </head>
 <body>
   <form>
     <h3>What time is best to give you a call?</h3>
     <label for=”morning”>
       Morning
       <input type=”radio” id=”morning” name=”callTime” checked>
     </label>
     <label for=”afternoon”>
       Afternoon
       <input type=”radio” id=”afternoon” name=”callTime”>
     </label>
     <label for=”evening”>
       Evening
       <input type=”radio” id=”evening” name=”callTime”>
     </label>
   </form>
 </body>
</html>

برای گروه بندی دکمه های رادیو در یک انتخاب ، هر مشخصه نام عنصر <input> باید دارای همان مقدار باشد. با انتخاب ویژگی ، یکی از دکمه های رادیو هنگام بارگیری صفحه انتخاب می شود.

اگر می خواهید لیستی ایجاد کنید که کاربر می تواند گزینه دیگری را انتخاب کند، از یک عنصر <input> با یک نوع checkbox می توان یک جعبه چک را تعیین کرد:

<html>
 <head>
   <title>Radio Buttons</title>
 </head>
 <body>
   <!– The following radio buttons will not be considered part of the same group since they don’t have
                the same “name” attribute. –>
   <form>
     <h3>What time is best to give you a call?</h3>
     <label for=”morning”>
       Morning
       <input type=”radio” id=”morning”>
     </label>
     <label for=”afternoon”>
       Afternoon
       <input type=”radio” id=”afternoon”>
     </label>
     <label for=”evening”>
       Evening
       <input type=”radio” id=”evening”>
     </label>
   </form>
 </body>
</html>
<html>
 <head>
   <title>Radio Buttons</title>
 </head>
 <body>
   <form>
     <h3>Select all the times that you are available:</h3>
     <label for=”morning”>
       Morning
       <input type=”checkbox” id=”morning” name=”callTime” checked>
     </label>
     <label for=”afternoon”>
       Afternoon
       <input type=”checkbox” id=”afternoon” name=”callTime”>
     </label>
     <label for=”evening”>
       Evening
       <input type=”checkbox” id=”evening” name=”callTime”>
     </label>
   </form>
 </body>
</html>

اکنون که با اصول HTML آشنا شدید ، بیایید بیاموزیم که یک صفحه HTML را در فصل بعدی استایل کنیم.

نوشته های مشابه

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا