Thuộc tính kích thước của phần tử được sử dụng để đặt chiều rộng của đầu vào. Chiều rộng càng nhiều sẽ dẫn đến hộp văn bản có nhiều chiều rộng hơn. Bạn có thể đặt thuộc tính kích thước cho các loại đầu vào sau - văn bản, tìm kiếm, email, mật khẩu, điện thoại và url.
Sau đây là cú pháp -
<input size="size_num">
Ở trên, size_num là chiều rộng của đầu vào mà bạn cần đặt bằng số. Giá trị mặc định là 20.
Bây giờ chúng ta hãy xem một ví dụ để triển khai thuộc tính size của phần tử -
Ví dụ
<!DOCTYPE html> <html> <body> <h2>Register</h2> <form action="" method="get"> Id − <input type="text" name="id" placeholder="Enter UserId here..." size = "25" required><br> Password − <input type="password" name="pwd" placeholder="Enter password here..." required><br> DOB − <input type="date" name="dob" placeholder="Enter date of birth here..."><br> Telephone − <input type="tel" name="tel" placeholder="Enter mobile number here..." required><br> Email − <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br> <button type="submit" value="Submit">Submit</button> </form> </body> </html>
Đầu ra
Trong ví dụ trên, chúng ta có một số trường có nút -
<form action="" method="get"> Id − <input type="text" name="id" placeholder="Enter UserId here..." size = "25" required><br> Password − <input type="password" name="pwd" placeholder="Enter password here..." required><br> DOB − <input type="date" name="dob" placeholder="Enter date of birth here..."><br> Telephone − <input type="tel" name="tel" placeholder="Enter mobile number here..." required><br> Email − <input type="email" name="email" placeholder="Enter email here..." size = "35"><br><br> <button type="submit" value="Submit">Submit</button> </form>
Bây giờ, giả sử chúng tôi muốn một hộp văn bản lớn hơn, tức là với chiều rộng lớn hơn. Vì vậy, chúng tôi đã sử dụng thuộc tính size để đặt chiều rộng bằng số -
<input type="text" name="id" placeholder="Enter UserId here..." size = "25" required>