Question

我正在做一个项目，但我需要帮助我的表格。我正在制作一个简短的描述文本框，我的尺寸是我想要的大，但我的文字从中间开始。此外，当您键入文本超出框。我不希望文本保留在我希望它包含在框中的一行上。

<!DOCTYPE html>

<html lang="en">
<head>
    <title>Centennial College|Creating Student Profile</title>
    <meta charset="utf-8">
    <style id="navStyle">
        /*I got some help on this coding from w3schools.*/
        #image2{
            position: absolute; height: 100px;
        }
        #navigationList{
            list-style-type: none;
            margin: 0;
            padding:0;
            overflow:hidden;
            background-image: url(Images/background_header.jpg);
            position: absolute; left: 310px; height: 100px; width:950px; 
            font-weight: bold;
        }
        .links{
            float:left; 
            position: relative; top: 30px;
        }
        .links a{
            display:block;
            color:white;
            text-align: center;
            padding: 10px 50px;
            text-decoration: none;
        }
        /*When someone hovers over the link the colour goes black*/
        .links a:hover{
            background-color:#c6f22c;
            color: #45473e;
        }
        .links .active{
            color:#6b8112;
        }

    </style>

    <style id="bodyStyle">
        #headerImage img{
            width: 1245px;
        }
         body{
            background-color:#464646;
            font-family:cursive, sans-serif;
            color:#464646;
        }
        forms{   
            color: #464646;
            font-size: 20px;
            background-color:floralwhite;
            display: inline-block;
        }
        #formSection h1, h3{
            color:aliceblue;
        }
        #description{
            height: 150px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="Navigation">
        <!--Navigation Links with Logo. All Style code is in style sheets.-->
        <img id="image2" src="Images/Logo.jpg" alt="Centennial Logo" />

        <ul id="navigationList">
            <li class="links"><a href="index.html">Home Page</a></li>

            <li class="links"><a class="active" href="creatstudentprofile.html">Create Student Profile</a></li>

            <li class="links"><a href="viewmyperformance.html">View My Performance</a></li>
        </ul>
    </div>

    <div id="headerImage">
        <img src="Images/ecentennial-students.jpg" alt="Header Picture"/>
    </div>

    <div id="formSection" style="margin:0 auto; width:75%; text-align: center;">
        <h1>Enter the information below to create your student profile!</h1>
        <h3>Create your Student Profile:</h3>
        <forms>
            <fieldset>
                <legend>Student Profile</legend>
                Name:
                <br>
                <input type="text" name="name" size="40">
                <br>
                Email Address:
                <br>
                <input type="email" name="email" size="40">
                <br>
                Year:
                <br>
                <select id="year" name="Year">
                    <option value="year1">Year 1</option>
                    <option value="year2">Year 2</option>
                    <option value="year3">Year 3</option>
                </select>
                <br>
                <input type="radio" name="computerType" value="mac">Mac
                <input type="radio" name="computerType" value="pc">PC
                <br>
                Brief Description:
                <br>
                <input type="text" name="Description" size="40" id="description">
                <br>
                <input type="Submit" value="Submit">
            </fieldset>
        </forms>
    </div>
</body>
</html>

Answer 1

对我而言，您希望input的行为与textarea完全相同。你应该改用它。

<textarea id="description" name="Description"></textarea>

HTML表单标记，需要文本留在文本框内

1 个答案: