input标签 select标签 textarea标签的总结

最新推荐文章于 2024-04-01 08:15:00 发布

Diligentruirui

最新推荐文章于 2024-04-01 08:15:00 发布

阅读量249

点赞数 1

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/Diligentruirui/article/details/121081575

版权

input标签

type属性的取值及其作用
text	文本框
password	密码框
submit	提交按钮
radio	单选按钮
checkbox	多选按钮
submit	提交按钮
reset	复位按钮重置按钮
button	按钮
image	图像按钮
file	上传文件文件域
hidden	隐藏域用户页面上是看不见的内容作用提交一些用户不可见的信息
email	邮箱

扩展内容

type属性的取值及其作用
readonly	字段只能读不能修改
disabled	规定 input 标签禁用不可点击的
autofocus	默认光标的位置
required	提示 Input 不能为空

<!DOCTYPE html>
 <html lang="en">
 <head><meta charset="UTF-8">
 <title>input标签</title> 
</head> 
<body>

<h2>用户注册</h2> <form><p>
用户名:<input type="text" value="zhangsan" name="username" readonly disabled></p> 
<p>密码:<input type="password" autofocus></p> 
<p>确认密码:<input type="password" required></p> 
<p> 请选择你的性别:<input type="radio" name="gender" checked>男 <input type="radio" name="gender">女 </p> 
<p> 请选择你的爱好:<input type="checkbox">唱歌 <input type="checkbox">跳舞 <input type="checkbox">rap <input type="checkbox">篮球 </p> 
<input type="submit" value="上传"> 
<input type="reset" value="复位"> 
<input type="button" value="按钮"> 
<input type="image" src="按钮.jpg"> 
<input type="file"> <input type="hidden" >
 请输入你的邮箱:<input type="email" > 
</form> 
</body> 
</html>

select标签

下拉列表框

option ------ 子选项（下拉列表框的选项） ----- 标签

请选择你所在的城市：
 <select> 
<option>西安</option> 
<option>重庆</option> 
<option>内江</option> 
<option>江苏</option> 
<option>北京</option>
 <option>上海</option>
 </select>

multiple -------- 以列表的形式显示 ------ 属性

selected ------------ 默认选择某一个选项

textarea标签

<p> 
<textarea cols="50" rows="5">这个家伙很懒，什么都没有留下...... </textarea>
 </p>

属性及其作用
属性	作用
cols	文本域的宽度
rows	文本域的高度

补充：font ------- size (1-7 字大小由小到大)

<font size="1">这是字体</font> 
<font size="2">这是字体</font>
 <font size="3">这是字体</font> 
<font size="4">这是字体</font> 
<font size="5">这是字体</font> 
<font size="6">这是字体</font> 
<font size="7">这是字体</font> 
<font size="8">这是字体</font>

练习

<!DOCTYPE html> 
<html lang="zh">
 <head> 
<meta charset="UTF-8" /> 
<title>form表单</title> </head>
 <body>
 <h1>用户注册</h1> 
<form action="#" method="post" enctype="multipart/form-data">
 <label for="usename">用户名称：</label> 
<input type="text" id="usename" name="usename" value="liujianhong" readonly/> 
<br /> 
<input type="text" name="usename1" value="liujianhong" disabled /> <br />
 用户密码：<input type="password" name="password" required autofocus /> <br />
 用户性别：<input type="radio" value="男" name="gender" checked />男
          <input type="radio" value="女" name="gender"/>女<br /> 
您的爱好： <input type="checkbox" value="football" name="fav" />足球
 <input type="checkbox" value="篮球" name="fav" />篮球
 <input type="checkbox" value="LOL" name="fav" />LOL 
<input type="checkbox" value="韩剧" name="fav" />韩剧
 <input type="checkbox" value="王者荣耀" name="fav" />王者荣耀 <br />
 邮箱：<input type="email" name="email" placeholder="请输入您的邮箱" /> <br />
 用户头像：<input type="file" name="avatar" id="avatar" /> <br /> 
<input type="hidden" name="id" value="12"/><br /> 
您的家庭住址是： <select name="address">
 <option value="郑州">郑州</option>
 <option value="兰州" selected>兰州</option>
 <option value="杭州">杭州</option> 
<option value="苏州">苏州</option> 
</select> <br /> 
您的建议或者意见：<br /> <!--row 行 column 列--> 
<textarea name="comment" rows="10" cols="30" placeholder="您的建议或者意见"></textarea> <br /> 
<input type="color" name="" id="" value="" />
 <input type="date" name="" id="" value="" /> 
<input type="datetime-local" name="" id="" value="" />
<input type="time" name="" id="" value="" /> 
<input type="url" name="" id="" value="" /> 
<input type="range" name="" id="" value="" /> 
<input type="submit" value="注册用户" /> </form>
 </body>
 </html>

效果图

Diligentruirui

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
input标签 select标签 textarea标签的总结

input标签type属性的取值及其作用 text 文本框 password 密码框 submit 提交按钮 radio 单选按钮 checkbox 多选按钮 submit 提交按钮 reset 复位按钮
复制链接

扫一扫