前端 HTML form表单标签 textarea标签 多行文本

 

 


作用:允许用户录入多行数据到表单控件中
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Titletitle>
head>
<body>
    <div>
        <form action="http://www.baidu.com" method="get">
            <div>
                自我介绍:
                <textarea>textarea>
            div>
        form>
    div>
body>
html>

 

 

 在文本输入内容

 

属性说明:

  • name:提交给服务端
  • rows:设置文本区域的列数,变相设置当前元素宽度
  • cols:设置文本区域的行数,变相设置当前元素高度
  • disabled:禁用

 

 

设置文本域rows高度,cols宽度

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Titletitle>
head>
<body>
    <div>
        <form action="http://www.baidu.com" method="get">
            <div>
                自我介绍:
                <textarea cols="20" rows="5">textarea>
            div>
        form>
    div>
body>
html>

 

前端 HTML form表单标签 textarea标签 多行文本_第1张图片

 

 

加上name 可以向服务端提交数据 设置默认值
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Titletitle>
head>
<body>
    <div>
        <form action="http://www.baidu.com" method="get">
            <div>
                自我介绍:
                <textarea cols="20" rows="5" name="text">miketextarea>
            div>
        form>
    div>
body>
html>

 

前端 HTML form表单标签 textarea标签 多行文本_第2张图片

 

加上placehodler属性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Titletitle>
head>
<body>
    <div>
        <form action="http://www.baidu.com" method="get">
            <div>
                自我介绍:
                <textarea cols="20" rows="5" name="text" placeholder="自我介绍">textarea>
            div>
        form>
    div>
body>
html>

 

前端 HTML form表单标签 textarea标签 多行文本_第3张图片

 

转载于:https://www.cnblogs.com/mingerlcm/p/10636570.html

你可能感兴趣的:(前端 HTML form表单标签 textarea标签 多行文本)