表单相关标签和属性

input标签-文本框

标签名type属性值说明
inputtext文本框,用于插入单行文本
inputpassword密码框,用于输入密码
inputradio单选框,用于多选一
inputCheckBox多选框,用于多选
inputfile文本选择,用于之后上传文件
inputsubmit提交按钮,用于提交
inputreset重置按钮,用于重置
inputbutton普通按钮,默认无功能,之后配合js添加功能

value属性:用户输入的内容,提交之后发送给后端服务器
name属性:当前控件的含义,提交之后可以告诉后端发送的数据是什么含义
name=value的属性值
placeholder==占位符
file下外加multiple

<!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.0">
    <title>Document</title>
</head>
<body>
    密码:<input type="password" placeholder="请输入密码">
</body>
</html>
<!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.0">
    <title>Document</title>
</head>
<body>
    <!-- 密码:<input type="password" placeholder="请输入密码"> -->
    <input type="radio" name="g">男
    <input type="radio" name="g">nv
    <!-- <input type="checkbox">娱乐
    <input type="checkbox">娱乐
    <input type="checkbox">娱乐
    <input type="checkbox">娱乐 -->
</body>
</html>
请输入图片描述
<!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.0">
    <title>Document</title>
</head>
<body>
    <!-- 密码:<input type="password" placeholder="请输入密码"> -->
    <!-- <input type="radio" name="g">男
    <input type="radio" name="g">nv -->
    <input type="checkbox">娱乐
    <input type="checkbox">娱乐
    <input type="checkbox">娱乐
    <input type="checkbox">娱乐
</body>
</html>
表单相关标签和属性插图1
<!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.0">
    <title>Document</title>
</head>
<body>
    <!-- 密码:<input type="password" placeholder="请输入密码"> -->
    <!-- <input type="radio" name="g">男
    <input type="radio" name="g">nv -->
    <!-- <input type="checkbox">娱乐
    <input type="checkbox">娱乐
    <input type="checkbox">娱乐
    <input type="checkbox">娱乐 -->
    <input type="file" multiple>上传文件
</body>
</html>
表单相关标签和属性插图2
<!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.0">
    <title>Document</title>
</head>
<body>
    <!-- 密码:<input type="password" placeholder="请输入密码"> -->
    <!-- <input type="radio" name="g">男
    <input type="radio" name="g">nv -->
    <!-- <input type="checkbox">娱乐
    <input type="checkbox">娱乐
    <input type="checkbox">娱乐
    <input type="checkbox">娱乐 -->
    <!-- <input type="file" multiple>上传文件 -->
    <form action="">
        <input type="submit">
    </form>
</body>
</html>
表单相关标签和属性插图3
<!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.0">
    <title>Document</title>
</head>
<body>
   <input type="button" value="登录">
</body>
</html> 
表单相关标签和属性插图4
<!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.0">
    <title>Document</title>
</head>
<body>
   <input type="reset">
</body>
</html> 
表单相关标签和属性插图5

button按钮标签

标签名type属性值说明
buttonsubmit提交按钮,点击之后提交数据给后端服务器
buttonreset重置按钮,点击之后恢复表单
buttonbutton普通按钮,默认无功能,之后配合js添加功能
<!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.0">
    <title>Document</title>
</head>
<body>
    <form action="">
   <input type="text" value="登录">
   <button type="reset">重置</button>
</form>
</body>
</html> 
表单相关标签和属性插图6

下拉菜单标签(option)

option*12{$}递增1~12

    <select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
    </select>
表单相关标签和属性插图7

selected默认首选该年份

<!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.0">
    <title>Document</title>
</head>
<body>
    <select name="" id="">
<option value="">1993</option>
<option value="" selected>1994</option>
<option value="">1995</option>
    </select>
</body>
</html>
表单相关标签和属性插图8

文本域标签(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=1, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <textarea name="" id="" cols="30" rows="3"></textarea>
</body>
</html>
表单相关标签和属性插图9

label标签

增加用户的点击范围,提升用户体验

方式1:

<!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.0">
    <title>Document</title>
</head>
<body>
    <form action="">
       <label>昵称:<input type="text" placeholder="请输入昵称"></label> 
        <label ><input type="radio" name="gender"> 男</label>
    </form>
</body>
</html>
表单相关标签和属性插图10

方法2:

<!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.0">
    <title>Document</title>
</head>
<body>
    <form action="">
       <label for="0555">昵称:<input type="text" placeholder="请输入昵称" id="0555"></label> 
        <input type="radio" name="gender" id="033"><label for="033">女</label>
    </form>
</body>
</html>
表单相关标签和属性插图11

没有语义布局标签

<!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.0">
    <title>Document</title>
</head>
<body>
    <div>大盒子</div>
    <hr>
    <span>小盒子</span>
    <span>小盒子</span>
    <span>小盒子</span>
</body>
</html>
表单相关标签和属性插图12

字符实体

显示结果描述实体名称
空格 
<小于号<
>大于号>
&和号&
引号
撇号‘(ie不支持)
¢分(cent)¢
£镑(pound)£
元(yen)¥
欧元(euro)
©版权(copyright)©
§小节§

空格

<!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.0">
    <title>Document</title>
</head>
<body>
    好 哒  好  哒    好
</body>
</html>
表单相关标签和属性插图13

大于号小于号

<!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.0">
    <title>Document</title>
</head>
<body>
    <div><hr></div>
</body>
</html>
表单相关标签和属性插图14
© 版权声明
THE END
喜欢就支持一下吧
点赞7赞赏 分享
评论 抢沙发

请登录后发表评论