HTLM的表单

HTLM的表单

表单的post和get
表单的格式：

<form action="1.我的第一个网页.html" method="get">
<!-- 表单主体-->
</form>

• action：表单的提交的位置，可以是网站，也可以是一个请求处理地址
• method: post,get提交方式：
  get方式提交：我们可以在url中看见我们要提交的信息，不安全。但高效。
  post：比较安全，传输大的文件

代码：

<h1>登录</h1>
<form action="https://www.baidu.com/" method="get">
    <p>名字：<input type="text" name="username"  ></p>
    <!--密码框：<input type="password">-->
    <p>密码：<input type="password" name="pwd" ></p>
</form>

• 文本输入框：input type=“text”

• name：表单的名字

• -密码框：input type=“password”
  
  提交和重置

    <input type="submit">
    <input type="reset" >
  

  

文本框：

<p>名字：<input type="text" name="username" value="狂神" maxlength="6" size="30" ></p>

• value=“狂神” 默认的初始值
• maxlength=“6” 最长能写几个字符
• size=“80” 文本框的长度

单选框：

 <p>性别
    <input type="radio" value="boy" name="sex" />男
    <input type="radio" value="girl" name="sex" />女
 </p>

name表示同组的情况下，只可选其一。

代码执行结果：

多选框：

<p>爱好：
        <input type="checkbox" value="sleep" name="hobby" checked>睡觉
        <input type="checkbox" value="code" name="hobby">代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
</p>

• input type=“checkbox”
• checked:默认被选中

运行结果：

按钮：

	<p>
        <input type="button" name="btn" value="点击变长">
        <input type="image" src="../resources/image/1.jpg">
    </p>
    <p>
        <input type="submit">
        <input type="reset" >
    </p>

• input type=“button” 普通按钮
• input type=“image” 图像按钮
• input type=“submit” 提交按钮
• input type=“reset” 重置

下拉框：

<p>国家：
        <select name="列表名称">
            <option value="china" selected>中国</option>
            <option value="us">美国</option>
            <option value="eth">瑞士</option>
        </select>
    </p>

• selected:默认被选中

代码结果：

文本域：

    <!--文本域
       cols="50" rows="10"
    -->
    <p>反馈
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>

    </p>

运行结果：

文件域：

    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

运行结果：

点击选择文件，就可以选择。

邮件验证：

<!--邮件验证
    -->
    <p>邮箱
        <input type="email" name="email">
    </p>

写入后要进行初级验证，不符合规范不能上传

URL验证：

<!--URL验证
    -->
    <p>URL
        <input type="url" name="url">
    </p>

运行结果：

在输入网址后会进行初步验证，输入不符合要求时就不能提交。

数字验证：

<!--数字验证-->
    <p>商品数量
        <input type="number" name="商品数量" max="10" min="2" step="1">
    </p>

• max是商品的最大值
• min是商品的最小值
• step是每一次的步长

运行结果：

滑块：

  <!--滑块-->

    <p>滑块(音量)
        <input type="range" name="voice" min="10" max="100" setp="5">
    </p>

运行结果：

搜索框

<!--搜索框-->
    <p>搜索
        <input type="search" name="search">
    </p>

运行的结果：

增强鼠标的可用性：

!--增强鼠标可用性-->
    <label for="mark">你点我试试</label>
    <input type="text" id="mark">

运行结果：

点击你点我试试，通过Mark的标记将鼠标锁定到框中，

表单的初级验证：

placeholder	提示信息
requird	非空判断
pattern	正则表达式

placeholder 提示信：提示用户输入什么信息，输入后提示信息消失

<p>名字：<input type="text" name="username"  maxlength="6" size="30" placeholder="请输入姓名"></p>

运行结果：

requird 非空判断：非空目录，输入不能为空

<p>名字：<input type="text" name="username"  maxlength="6" size="30" placeholder="请输入姓名" required></p>