HTML表单

2020-02-25 15:58:14 作者：互联网
1. 表单标签

表单标签：用于采集用户输入的数据，和服务器交互(form标签)
表单项中的数据如果想要被提交必须指定name属性,才可以提交
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--<img src="img/c1.png"/>-->
        <!--
            将<form>标签放在<input>属性外：
                action:指定提交数据的url
                method:指定提交方式
                    为http响应的
                        get:
                        post:
                表单项中的数据如果想要被提交必须指定name属性,才可以提交
        -->
        <!--
            input:可以通过type属性值，改变元素展示样式
                type属性：
                    1.text:文本输入框，如果不输入type，则默认为text
                    2.password:密码框
                    3.radio:单选框
                        1.要想实现单选，则name属性值必须一样
                        2.给每个单选框提供value属性，指定其被选中后提交的值
                        3.通过check属性可以指定默认值)
                    4.checkbox:复选框
                        1.给每个单选框提供value属性，指定其被选中后提交的值
                        (单选框与复选框的check属性可以指定默认值)
                    5.file:上传文件
                    6.hidden:隐藏域，用来提交信息
                        value值为信息。
                    7.按钮:
                        1.button:
                        2.submit:提交表单信息
                        3.<image>:图标提交属性
                    8.date(datetime):
                    9.email:
                value属性：显示提示字
                placeholder属性：显示提示信息，当要输入时清空提示信息
            select:下拉列表
                option指定列表项
            textarea:文本域    
                cols:指定列数，每一行的字符数
                rows:指定行数
            
        -->
        <form action = "#" method="get">
            
        用户名(文本输入框): <input type="text" name="username" value="请输入账号"/>
                <br />
        密码(密码框): <input type="password" name="password" placeholder="请输入密码"/>
                <br />
        性别(单选框):　<input type="radio" name="gender" value="male" checked="checked"/>男
                <input type="radio" name="gender" value="female"/>女
                <br />
        爱好(复选框)：　<input type="checkbox" name="hoppy" value="one"/>爱好一
                <input type="checkbox" name="hoppy" value="two"/>爱好二
                <input type="checkbox" name="hoppy" value="three"/>爱好三
                <br />
        选择文件(文件框): <input type="file" name="file"/>
                <br />
        隐藏域: <input type="hidden" name="HiddenData" value="yincangyu"/>
                <br />
        日期： <input type="date" name=""/>
                <br />
        下拉列表：<select name="xialaleibiao">
                    <option value="1">11</option>
                    <option value="2">22</option>
                    <option value="3" selected="selected">33</option>
                </select>
                <br />
        文本域：<textarea cols="20" name="wenben"></textarea>
                <br />
        提交表单信息：     <input type="submit" id="" value="登陆" />
        </form>
    </body>
</html>
标签：标签,爱好,指定,表单,HTML,提交,属性
来源： https://www.cnblogs.com/innndown/p/12362089.html