美文网首页
Form表单用法

Form表单用法

作者: HE_Zoro | 来源:发表于2017-10-15 10:19 被阅读0次

    <form> 标签用于为用户输入创建 HTML 表单,表单能够包含input元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含menus、textarea、fieldset、label、legend元素
    表单用于向服务器传输数据。

    form标签:要提交的内容使用该标签包裹 。
    action属性:指定表单提交到哪里。
    method属性:决定表单的提交方式get(默认值)/post。
    <form action="/getInfo" method="get"> <div class="submit"> <button>提交</button> </div> </form>

    input标签:表单项标签.
    type属性:text:文本。
    name属性:对于表单项,提交时键值对所对应的键。
    value属性:对于需要提交的表单项,提交时的值
    <input id="username" type="text" name="username" value="ruo">

    type属性:password:密码.
    <input id="password" type="password" name="password" placeholder="输入密码">

    type属性: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>

    type属性:radio:单选框
    相同的name为一组
    <div class="sex"> <label>性别</label> <input type="radio" name="sex" value="男"> 男 <input type="radio" name="sex" value="女"> 女 </div>

    type属性: file:上传文件
    <input type="file" name="myfile" accept="定义上传文件类型">

    select标签:下拉选
    name属性:提交的键
    <select name="city"> <option value="beijing">北京</option> <option value="shanghai" selected>上海</option> <option value="hangzhou">杭州</option> </select>

    多行文本框
    <textarea name="article"> 默认显示文本, 多行文本,注意和 type=text的区别 </textarea>

    隐藏域,检验是否安全
    <input type="hidden" name="csrf" value="12345623fafdffdd">

    按钮
    <input type="button" value="Buttom" /> 不会提交 <input type="submit" value="Submit" /> 会提交 <input type="reset" value="Reset" /> 重置输入

    相关文章

      网友评论

          本文标题:Form表单用法

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