美文网首页
form表单

form表单

作者: Gorden_x | 来源:发表于2017-08-17 13:56 被阅读0次

    1.Text input(文本输入框)是用来获得用户输入的绝佳方式。
    格式:
    <input type="text">
    input元素是自关闭的
    详细解析:http://www.w3school.com.cn/tags/tag_input.asp

    2.占位符(placeholder text)是用户在input(输入)框输入任何东西之前放置在input(输入)框中的预定义文本。
    格式:
    <input type="text" placeholder="this is placeholder text">

    3.使用HTML来构建可以跟服务器交互的Web表单(form),通过给你的form元素添加一个action属性来达到此目的。
    action属性的值指定了表单提交到服务器的地址
    格式:
    <form action="/url-where-you-want-to-submit-form-data"></form>

    4.让我们来为你的form添加一个submit(提交)按钮,点击这个按钮,表单中的数据将会被发送到你通过action属性指定的地址上。
    格式:
    <button type="submit">this button submits the form</button>
    在form元素内

    5.当你设计表单时,你可以指定某些选项为必填项(required),只有当用户填写了该选项后,用户才能够提交表单。
    例如,如果你想把一个文本输入字段设置为必填项,在你的input元素中加上required属性就可以了。
    格式:
    <input type="text" required>
    注意:required属性在Safari浏览器中不起作用,请用其他浏览器来学习,推荐使用Chrome

    6.多选一的场景就用radio button(单选按钮)
    每一个单选按钮都应该嵌套在它自己的label(标签)元素中。
    注意:所有关联的单选按钮应该使用相同的name属性
    格式:
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    在form元素内

    7.checkboxes(复选按钮)。
    复选按钮是input的输入框的另一种类型。
    每一个复选按钮都应该嵌套进label元素中。
    所有关联的复选按钮应该具有相同的name属性。
    格式:
    <label><input type="checkbox" name="personality"> Loving</label>
    在form元素内

    8.使用checked属性,你可以设置复选按钮和单选按钮默认被选中。
    为此,只需在input元素中添加属性checked
    格式:
    <input type="radio" name="test-name" checked>

    相关文章

      网友评论

          本文标题:form表单

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