สามารถกำหนดขนาดของกล่องข้อความอินพุตใน HTML ได้อย่างไร?

นี่คือกล่องข้อความป้อน HTML:

<input type="text" id="text" name="text_name" />

อะไรคือตัวเลือกในการกำหนดขนาดของกล่อง?

สิ่งนี้สามารถนำไปใช้ใน CSS ได้อย่างไร?

คุณสามารถตั้งค่าwidth:

<input type="text" id="text" name="text_name" style="width: 300px;" />

หรือดีกว่ากำหนดคลาส:

<input type="text" id="text" name="text_name" class="mytext" />

และในไฟล์ CSS แยกกันใช้สไตล์ที่จำเป็น:

.mytext {
    width: 300px;
}

หากคุณต้องการ จำกัด จำนวนอักขระที่ผู้ใช้สามารถพิมพ์ลงในกล่องข้อความนี้คุณสามารถใช้maxlengthแอตทริบิวต์:

<input type="text" id="text" name="text_name" class="mytext" maxlength="25" />

sizeแอตทริบิวต์การทำงานได้เป็นอย่างดี

<input size="25" type="text">

ลองทำตามนี้

<input type="text" style="font-size:18pt;height:420px;width:200px;">

หรืออื่น ๆ

 <input type="text" id="txtbox">

ด้วย css:

 #txtbox
    {
     font-size:18pt;
     height:420px;
     width:200px;
    }

คุณสามารถกำหนดความกว้างเป็นพิกเซลผ่านการจัดแต่งทรงผมแบบอินไลน์:

<input type="text" name="text" style="width: 195px;">

คุณยังสามารถกำหนดความกว้างด้วยความยาวอักขระที่มองเห็นได้:

<input type="text" name="text" size="35">

<input size="45" type="text" name="name">

"ขนาด" ระบุความกว้างที่มองเห็นได้ในอักขระของอินพุตองค์ประกอบ

คุณยังสามารถใช้ความสูงและความกว้างจาก css

<input type="text" name="name" style="height:100px; width:300px;">