HTML的textarea元素
3511字,阅读需时12分钟
来自专栏
课程/专栏

textarea元素和前面介绍的input元素都可以获取用户在输入框输入的文本内容,哪为什么还要提供textarea元素呢?这就涉及到输入文本内容多少的问题,input元素只能输入单行文本内容,输入再多的文字也只能在一行显示,而且没有滚动条;textarea元素就不同了,textarea元素可以输入多行文本内容,支持文本回车和在textarea的宽度内文本自动换行,当输入的文本内容行数超过textarea元素的高度时,textarea元素会自动出现纵向滚动条。

textarea元素使用textarea标签,textarea标签有两个比较重要的属性cols和rows,cols属性用于设置textarea元素输入区域的可见宽度,rows属性用于设置textarea元素输入区域的可见高度。例如下面的HTML文档展示了textarea元素及属性rows和cols的使用方法。

<html>
<head>
      <title>使用textarea获取多行文本内容</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
       <h5>这是每行30个字符,5行高度的输入框</h5>
       <textarea cols="15" rows="5">
白日依山尽,
黄河入海流。
欲穷千里目,
更上一层楼。
      </textarea>
 <h5>这是每行10个字符,3行高度的输入框</h5>
       <textarea cols="10" rows="3">
白日依山尽,
黄河入海流。
欲穷千里目,
更上一层楼。
      </textarea>
 </boyd>
<html>

下图是浏览器的显示效果。从浏览器的显示效果可以看出,输入框的宽度由属性cols确定,当输入框内容每行的字符数超过设置的宽度时,输入框会对输入的内容自动换行;输入框的高度由属性rows确定,当输入框内容的高度超过输入框自身高度时,输入框会自动显示纵向滚动条。

 image.png

例1:设计一个用户信息登记网页,用户信息包括用户姓名、年龄、性别、邮箱、爱好(可多选)、个人简介。

<html>
<head>
      <title>信息登记</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
       <h3>用户信息登记表</h3>
       <hr>
      <form action="/login.jsp">
          <p> 姓名:<input type="text" name="username" maxlength="20" value="请输入您的姓名"/></p>
          <p> 年龄:<input type="text" name="age" maxlength="3" value="请输入您的年龄"/></p>
          <p>性别:<input type="radio" name="sex" value="男" />男<input type="radio" name="sex" value="女" />女</p>
          <p>爱好:</p>
                <input type="checkbox" name="fav"  value="旅游" checked />旅游
                <input type="checkbox" name="fav" value="体育"  checked />体育
                <input type="checkbox" name="fav" value="文学" />文学
                <input type="checkbox" name="fav" value="娱乐" />娱乐
                <input type="checkbox" name="fav" value="学习" />学习
                <input type="checkbox" name="fav" value="军事" />军事
          <p>个人简介:</p>
          <textarea name=”brief” cols="50" rows="10">请输入个人简介</textarea>
          <p><input type="submit" value="提交"/></p>
     </form>    
</boyd>
<html>

浏览器显示效果如下图所示。在上面的网页代码中,textarea的宽度和高度由cols和rows属性确定。但在实际应用中,textarea的宽度和高度一般由CSS来确定。

image.png

 

我要评论
全部评论
郎宏林
授课老师
授课老师简介
项目经理,系统分析和架构师,从事多年中文信息处理技术。熟悉项目管理、擅长项目需求分析和设计、精通Java、C#、Python等编程语言。
下载APP

手机、电脑同步学

用微信或手机浏览器扫描二维码,即可下载APP。

  • 备案号:鲁ICP备15001146号
  • @1997-2018 潍坊米粒花网络技术有限公司版权所有