美文网首页
HTML 表单的用法

HTML 表单的用法

作者: yytyff | 来源:发表于2017-02-15 17:45 被阅读0次

    定义与方法:

    • <form> 标签用于为用户输入创建 HTML 表单。
    • 表单能够包含input元素,比如文本字段、复选框、单选框、提交按钮等等。
    • 表单还可以包含menus,textare,fieldset,legend和label元素
    • 表单用以向服务器传输数据。
      input
    建立一个文本框:
    <html>
    <body>
    <form>
    名:<input type="text" name="firstname">
    <br>
    姓:<input type="text" name="lastname">
    </form>
    </body>
    </html>
    

    button

    提交按钮
    <button>提交</button>
    

    action method

    action
    访问的地址
    method:提交表单的方法 ,有get和post两种
    <form action="abc" method="get">
    

    password placeholder

    password输入内容自动变成圆点,安全性更高  placeholder提示“输入密码”
    <div class="password">
        <label for="password" >密码</label>
         <input id="password" type="password" name="password" placeholder="输入密码">
    </div>
    

    file

    文件上传
    <div class="file">
        <input type="file" name="myfile" accept="image/png, image/jpeg"/>
    </div>
    

    select

    下拉菜单
    <div class="select">
        <select name="city" id="">
        <option value="beijing">北京</option>
        <option value="shanghai" selected>上海</option>
        <option value="hangzhou">杭州</option>
        </select>
    </div>
    

    CheckBox

    多选
    <div class="hobby">
        <label >爱好</label>
        <input type="checkbox" name="hobby" value="read"> 读书
        <input type="checkbox" name="hobby" value="music"> 听歌
        <input type="checkbox" name="hobby" value="study"> 学习
    </div>
    

    radio

    单选
    <div class="sex">
        <label>性别</label>
        <input type="radio" name="sex" value="男"> 男
        <input type="radio" name="sex" value="女"> 女
    </div>
    

    textarea

    多行文本
    <div class="textarea">
        <textarea name="article" id="" cols="30" rows="10">
            ddddd
        </textarea>
    </div>
    

    reset

    清空信息
    <input type="reset" value="Reset">
    

    相关文章

      网友评论

          本文标题: HTML 表单的用法

          本文链接:https://www.haomeiwen.com/subject/gwpqwttx.html