学习前端0721--表单标签及标准/非标准属性的使用

最新推荐文章于 2024-07-30 23:06:43 发布

Brooke_w

最新推荐文章于 2024-07-30 23:06:43 发布

阅读量182

点赞数 1

文章标签：前端 html

本文链接：https://blog.csdn.net/Brooke_w/article/details/125922856

版权

前言

本文讲述html表单标签的使用和标准/非标准属性

一、表单标签

input语句中

type:
text 单行输入框
password 密码输入内容不可见
number 可选择数字
email 邮箱地址，必须按照邮箱方式输入

action 服务器地址如果省略则代表当前页面地址
method 交互方法 get/post 默认get

get 所有请求的数据会拼接到？后面
http://httpbin.org/?name=wmd&agr=18

post 所携带的数据不会在网址拼接，相对更加安全数据在formdate表单数据中更加安全

placeholder 表单内提示语句
需要写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.0">
    <title>Document</title>
</head>

<body>

    <form action="http://httpbin.org/post" method="post"><input name="username" type="text" placeholder="请输入用户名">
        <br>
        <input name="age" type="number" placeholder="请输入年龄">
        <br>
        <input type="submit">
    </form>
    <hr>

    <form action="http://httpbin.org/get" method="get"><input name="username" type="text" placeholder="请输入用户名">
        <br>
        <input name="age" type="number" placeholder="请输入年龄">
        <br>
        <input type="submit">
    </form>
</body>

</html>

二、表单域

标签中属性：

placeholder 提示，输入内容后不可见
autocomplete 自动填充 off关闭
required 必填项目
disabled 禁用状态
checked 默认选中状态

input标签中类型：

type:
text 单行输入框
password 密码输入内容不可见
number 可选择数字
email 邮箱地址，必须按照邮箱方式输入

radio 单选
checkbox 复选框
hidden 看不见的隐藏域

   <select name="" id=""><option value=""></option></select>下拉选项
select 必须有name
option 必须有value

   textarea文本属于区域，多行文本输入框
textarea 必须有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.0">
    <title>Document</title>
</head>

<body>
    <form action="http://httpbin.org/post" method="post">
		
        <input type="text" name="un" placeholder="请输入用户名" autocomplete="off">
        <br>
        <input type="number" name="nianji" placeholder="请输入密码">
        <br>
        <input type="password" name="pwd" placeholder="请输入密码">
        <br>
        <input type="email" name="email" placeholder="请输入邮箱">
        <br>
        <span>男：</span><input type="radio" value="man" name="sex"><span>女：</span><input value="women" name="sex"
            type="radio">
        <br>
        <span>爱好：</span>
        <span>篮球：</span><input name="hobby" value="basketball" type="checkbox">
        <span>足球</span><input name="hobby" value="football" type="checkbox">
        <br>
        <input type="color" name="color">
        <br>
        <input type="file">
        <br><br>
        <!-- 下拉选项 -->
        <select name="dddd">
            <option value="henan">河南</option>
            <option value="hebei">河北</option>
            <option value="hedong">河东</option>
            <option value="hexi">河西</option>
        </select>
        <!-- 文本输入区域  多行文本输入框 -->
        <br>
        <span>沟通框：</span><br>
        <textarea name="info" cols="30" rows="20"></textarea>


        <br><br>
        <input type="hidden" name="">
        <input type="submit">
    </form>
</body>

</html>

三、表单按钮

submit 提交按钮
reset 重置按钮
button 自定义按钮

代码如下

<!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="http://httpbin.org/post" method="post">
        <input type="submit" >
		<input type="reset">
		<input type="button">
    </form>
</body>

</html>

四、标准属性和非标准属性

标准属性（任何标签都可以使用的属性）

title 鼠标划入有提示
id 页面内必须唯一不能重复不能数字开头
class 类名多个元素可以有同一个类名一个元素可以有多个类名（空格隔开）
style 样式属性 style="样式属性名:样式属性值;样式属性名:样式属性值"

非标签属性（必须在特定的标签才能使用的属性）

charset 编码格式
sec 来源
alt 图片加载失败辅助提示文本
width 宽度
  height 高度
href 超级连接目标地址
target 是否空白页打开
controls 控件
aotuplay 自动播放
border 边框
  cellpadding 单元格内补
  cellspacing 单元格间距
colspan 列合并
rowspan 行合并