第四天之form表单的洗礼

表单中的action与method

区别：
action 服务器地址 如果省略则代表当前页面地址
method 交互方法 get/post 默认get

 <form action="http://httpbin.org/get" method="get">
     <!-- 
        get 所有请求的数据会拼接？后面
        http://httpbin.org/get？name=ccc

        post 所携带的数据不会在网址拼接相对更加安全
             数据在formdata表单数据中 更加安全
      -->
      <input type="text" name="username" placeholder="请输入用户名">
      <br>
      <input type="password" name="password" placeholder="请输入密码">
      <br>
      <input type="submit">
    </form>

表单域

属性

placeholder 提升 （输入内容后不可见）
autocomple 自动完成填充
required 必填项目
disabled 禁用状态
checked 单选框复选框默认的选中状态
selected 下拉列表的默认项目

type属性

text 单行文本输入框
password 密码 （输入内容不可见）
number 数字
email 邮箱
radio 单选框
checkbox 复选框
hidden 隐藏域

form例子 包含常用标签

 <form action="http://httpbin.org/get" method="get">
        <!-- value的值取决于输入的内容 -->
        <input type="text" name="un" placeholder="请输入用户名">
        <br>
        <input type="password" name="pwd" placeholder="输入密码">
        <br>
        <input type="number" name="age" placeholder="输入年纪">
        <br>
        <input type="email" name="email" placeholder="输入邮箱">
        <br>
        <span>男：</span> <input type="radio" name="sex" value="man">
        <span>女：</span> <input type="radio" name="sex" value="women">
        <br>
        <span>爱好：</span> 
        <span>足球</span> <input type="checkbox" name="hobby" value="football">
        <span>篮球</span> <input type="checkbox" name="hobby" value="basketball">  
        <br>
        <!-- 下拉选项 -->
        <span>居住地：</span>
        <select name="addr" >
            <option value="d">东</option>
            <option value="x">西</option>
            <option value="n">南</option>
            <option value="b">北</option>
        </select>
        <input type="submit" value="注册">     
     </form>