form表单

最新推荐文章于 2024-08-15 17:05:54 发布

嘿呦嘿呦拔萝卜975

最新推荐文章于 2024-08-15 17:05:54 发布

阅读量58

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_74149012/article/details/130662797

版权

form 标签一般会和input标签连用

属性	含义
action	跳转的路径
method	用来明确表单提交的方式（get post）默认值是get（get请求会把用户信息暴露在地址栏上）
name	表单的名称

注：post:相较于get比较安全，可隐藏用户信息。

1.表单元素

表单元素（文本框，密码框，下拉列表框等等），一般由input，textarea，select标签构成，需要放到form标签内使用

文本输入

<input type="text"> 定义用于文本输入的单行输入字段：

语法格式：

<input type="元素的类型" name="元素的名称" value="元素的值"

type的取值：

text	文本框
password	密码框
radio	单选按钮
checkbox	多选按钮
submit	提交按钮
reset	复位按钮
button	普通按钮
image	图像按钮
file	文本域（上传文件的按钮）
hidden	隐藏域
email	邮箱
color	颜色域
date	日期
time	时间
datetime-local	日期+时间
range	进度条

input属性：

checked	默认选择
readonly	只读字段只可以读不能修改
disabled	表示禁用不可以点击
autofocus	默认光标的位置
required	不能为空白提交

<!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>表单</title>
</head>
<body>
<form action="">
用户名：<input type="text" name="username" value="zhangsan" readonly><br>
用户名：<input type="text" name="username" value="lisi" disabled><br>
密码框：<input type="password" name="password" autofocus required><br>
请选择你的性别：<input type="radio" value="男" name="gender" checked>男
<input type="radio" value="女" name="gender">女
<p>
选择您的爱好：
<input type="checkbox" name="aihao" >唱歌
<input type="checkbox" name="aihao" >跳舞
<input type="checkbox" name="aihao" >rap
<input type="checkbox" name="aihao" >打篮球
</p>
<input type="submit">
<input type="reset">
<input type="button" value="普通">
<input type="file">
<input type="hidden" value="123456"><br>
请填写自己的邮箱：<input type="email" name="email" value="请填写邮箱">
<input type="color">
<input type="date">
<input type="time">
<input type="datetime-local">
<input type="range">
</form>
</body>
</html>

2.select标签

下拉列表框 ——————一般option标签进行连用

selected属性 ———— 默认被选中的选项

multiple="multiple" 属性 ————以列表形式显示

<select name="" id="" multiple="multiple">
<option value="">A</option>
<option value="">B</option>
<option value="" selected>C</option>
<option value="">D</option>

3. textarea标签

用来实现文本域

cols="30" ———— 多少列，表示文本域的宽度

rows="10"————多少行，表示文本域的高度

<!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>表单</title>
</head>
<body>
<form action="">
<textarea name="" id="" cols="70" rows="70">
</textarea>
</form>
</body>
</html>

嘿呦嘿呦拔萝卜975

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
form表单

表单元素（文本框，密码框，下拉列表框等等），一般由input，textarea，select标签构成，需要放到form标签内使用。multiple="multiple" 属性 ————以列表形式显示。cols="30" ———— 多少列，表示文本域的宽度。注：post:相较于get比较安全，可隐藏用户信息。下拉列表框 ——————一般option标签进行连用。rows="10"————多少行，表示文本域的高度。selected属性 ———— 默认被选中的选项。3. textarea标签。
复制链接

扫一扫