আজকে আমরা আলোচনা করব আমাদের 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>