HTML标签_表单标签_表单项input1和HTML标签_表单标签_表单项input2

HTML标签_表单标签_表单项input1：

表单项标签：

input：可以通过type属性值，改变元素展示的样式

type属性：

text：文本输入框，默认值

placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息

password：密码输入框

radio：单选框

注意：

1．要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。

2，一般会给每一个单选框提供value属性，指定其被选中后提交的值

3. checked属性，可以指定默认值

checkbox：复选框

注意∶

1.一般会给每一个单选框提供value属性，指定其被选中后提交的值

2. checked属性，可以指定默认值

label：指定输入项的文字描述信息

注意∶

label的for属性一般会和 input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。

代码实现：

<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
    <title>表单</title>
</head>
<body>
        <!--表单form 获取请求方式get-->
        <form action = "#" method = "get">
            <!--账号输入框input placeholder输入账号信息-->
            <label for = "username">账号</label>:<input name = "username" type = "text" placeholder = "请输入账号" id = "username"><br>
            <!--密码输入框input 输入密码提示框placeholder-->
            密码:<input name = "password" type = "password" placeholder = "请输入密码"><br>
            <!--单元框radio 默认选择checked-->
            位置:<input type = "radio" name = "gender" value = "male" checked> 射手
            <!--单元框radio-->
            <input type = "radio" name = "gender" value = "female"> 打野
            <!--换行-->
            <br>
            <!--复选框checkbox 默认选择checked-->
            射手:<input type = "checkbox" name = "sheshou" value = "shooter" checked> 金克丝
            <!--复选框checkbox 默认选择checked-->
            <input type = "checkbox" name = "sheshou" value = "shooters" checked> 小炮
            <!--复选框checkbox-->
            <input type = "checkbox" name = "sheshou" value = "shooterse"> 卡莎
            <br>
　　　　　　　<!--登录提交框input  submit是提交的意思-->
            <input type = "submit" value = "登录">

HTML标签_表单标签_表单项input2：

file：文件选择框

hidden：隐藏域，用于提交一些信息。

按钮︰

submit：提交按钮。可以提交表单

button：普通按钮

image :图片提交按钮

src属性指定图片的路径

在html里的type属性有多个

我们就不一一演示了：

代码实现：

<!--选择文件input框file-->
            图片：<input type = "file" name = "file"><br>
            <!--隐藏域input框hidden-->
            隐藏域：<input type = "hidden" name = "id" value = "aaa"><br>

            <!--取色器input框color-->
            取色器：<input type = "color" name = "color"><br>
            <!--生日input框date-->
            生日：<input type = "date" name = "birthday"><br>
            <!--生日input框date-local-->
            生日：<input type = "datetime-local" name = "birthday"><br>
            <!--邮箱input框email-->
            邮箱：<input type = "email" name = "email"><br>
            <!--年龄input框number-->
            年龄：<input type = "number" name = "age"><br>
            <!--登录提交框input  submit是提交的意思-->
            <input type = "submit" value = "登录">
            <!--上传图片input框image-->
            <input type = "button" value = "一个按钮"><br>