WordPress Support Engineer Input Field And Form

আজকে আমরা আলোচনা করব আমাদের WordPress Support Engineer Course এর ক্লাস ২ নিয়ে এবং আমাদের টপিক হলো html input fields.

ইনপুট ফিল্ডে বিভিন্ন রকম টাইপ রয়েছে এর মধ্যে default html,html-5,iput type="text" ইত্যাদি।

তো চলুন শুরু করি ।প্রথমেই আমরা আলোচনা করব ডিফল্ট html input field type="text" নিয়ে।

সিম্পল ভাবে আমরা এখানে type="text" দিলে এটা সাধারন লেখার মত আচরন করবে।এই টাইপের ওপর ভিত্তি করেই ইনপুট ফিল্ডের বিভিন্ন রকম ব্যাবহার হয়ে থাকে। আমরা বিভিন্ন রকম ইনপুট ফিল্ড গুলোর লিস্ট দেখি।

<center>
    <h2>WordPress Support Engineer Input Field And Form</h2>

    1. <h1>Input type text</h1>
    <input type="text">:
    <form>  
        <label>Enter first name</label><br>  
        <input type="text" name="firstname"><br>  
        <label>Enter last name</label><br>  
        <input type="text" name="lastname"><br>  
        <p><strong>Note:</strong>The default maximum cahracter lenght is 20.</p>  
    </form>  



2.<h1>Input type Password</h1>
 <input type="password">:

<form>  
    <label>Enter User name</label><br>  
    <input type="text" name="firstname"><br>  
    <label>Enter Password</label><br>  
    <input type="Password" name="password"><br>  
    <br><input type="submit" value="submit">  
</form>  


3. <h1>Input type Submit</h1>
<input type="submit">:
<form action="https://www.javatpoint.com/html-tutorial">  
    <label>Enter User name</label><br>  
    <input type="text" name="firstname"><br>  
    <label>Enter Password</label><br>  
    <input type="Password" name="password"><br>  
    <br><input type="submit" value="submit">  
</form>  

<h1>Input type reset</h1>
4. <input type="reset">:
<form>  
    <label>User id: </label>  
     <input type="text" name="user-id" value="user">  
              <label>Password: </label>  
     <input type="password" name="pass" value="pass"><br><br>   
     <input type="submit" value="login">  
      <input type="reset" value="Reset">  
</form>  

5.<h1>Input type radio</h1>
 <input type="radio">:
<form>  
    <p>Kindly Select your favorite color</p>  
    <input type="radio" name="color" value="red"> Red <br>  
    <input type="radio" name="color" value="blue"> blue <br>  
    <input type="radio" name="color" value="green">green <br>  
    <input type="radio" name="color" value="pink">pink <br>  
    <input type="submit" value="submit">  
  </form>  


  6.<h1>Input type checkbox</h1>
   <input type="checkbox">:<form>   
    <label>Enter your Name:</label>  
    <input type="text" name="name">  
    <p>Kindly Select your favourite sports</p>  
    <input type="checkbox" name="sport1" value="cricket">Cricket<br>  
    <input type="checkbox" name="sport2" value="tennis">Tennis<br>  
    <input type="checkbox" name="sport3" value="football">Football<br>  
    <input type="checkbox" name="sport4" value="baseball">Baseball<br>  
    <input type="checkbox" name="sport5" value="badminton">Badminton<br><br>  
    <input type="submit" value="submit">  
</form>  


7. <h1>Input type Button</h1>
<input type="button">:
<form>  
    <input type="button" value="Clcik me " onclick="alert('you are learning HTML')">  
</form>

8. <h1>Input type file</h1>
<input type="file">:

<form>  
    <label>Select file to upload:</label>  
    <input type="file" name="newfile">  
    <input type="submit" value="submit">  
</form>  


9.<h1>Input type image</h1>
 <input type="image">:

<h2>Input "image" type.</h2>  
<p>We can create an image as submit button</p>  
  <form>  
    <label>User id:</label><br>  
     <input type="text" name="name"><br><br>  
     <input type="image" alt="Submit" src="login.png"  width="100px">  
  </form>  


  1. <h1>Input type color</h1>
  <input type="color">:
  <form>  
    Pick your Favorite color: <br><br>  
    <input type="color" name="upclick" value="#a52a2a"> Upclick<br><br>  
    <input type="color" name="downclick" value="#f5f5dc"> Downclick  
</form>  


2. <h1>Input type date</h1>
<input type="date">:
<form>  
    Select Start and End Date: <br><br>  
      <input type="date" name="Startdate"> Start date:<br><br>  
      <input type="date" name="Enddate"> End date:<br><br>  
     <input type="submit">  
</form>  

3. <h1>Input type datetime-local</h1>
<input type="datetime-local">:
<form>  
    <label>  
      Select the meeting schedule: <br><br>  
      Select date & time: <input type="datetime-local" name="meetingdate"> <br><br>  
    </label>  
      <input type="submit">  
</form>  

4. <h1>Input type email</h1>
<input type="email">:
<form>  
    <label><b>Enter your Email-address</b></label>  
   <input type="email" name="email" required>  
   <input type="submit">  
    <p><strong>Note:</strong>User can also enter multiple email addresses separating by comma or whitespace as following: </p>  
    <label><b>Enter multiple Email-addresses</b></label>  
    <input type="email" name="email"  multiple>  
   <input type="submit">  
</form>     

5. <h1>Input type month</h1>
<input type="month">:

<form>  
    <label>Enter your Birth Month-year: </label>  
    <input type="month" name="newMonth">  
    <input type="submit">  
</form>  

6.<h1>Input type Number</h1>
 <input type="number">:
<form>  
    <label>Enter your age: </label>  
    <input type="number" name="num" min="50" max="80">  
     <input type="submit">  
</form>  

7. <h1>Input type url</h1>
<input type="url">:
<form>  
    <label>Enter your website URL: </label>  
    <input type="url" name="website" placeholder="http://example.com"><br>  
    <input type="submit" value="send data">  
</form>  

8. <h1>Input type week</h1>
<input type="week">:
<form>  
    <label><b>Select your best week of year:</b></label><br><br>  
    <input type="week" name="bestweek">  
    <input type="submit" value="Send data">  
 </form>  

 9. <h1>Input type search</h1>
 <input type="search">:
 <form>  
    <label>Search here:</label>  
    <input type="search" name="q">  
    <input type="submit" value="search">  
</form> 

10.<h1>Input type tel</h1>
 <input type="tel">:
<form>  
    <label><b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b></label>  
    <input type="tel" name="telephone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>  
    <input type="submit"><br><br>  
 </form>  

</center>