JavaWeb学习——简单学习HTML5（二）

JavaWeb学习——简单学习HTML5（二）

今天，我们来学习HTML中的表单< form >。表单，是用来搜集不同类型的用户输入。HTML表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

表单基本语法：

<!--
表单：
    action：表单数据向哪里提交
    method：提交方法
-->
<form action="www.baidu.com" method="get">



</form>

下面，我们就来注意学习表单元素：

①文本框

<!--
    文本框属性：
        type="text"：类型为文本框
        value：默认值
        maxlength：文本框可输入最多字符
        placeholder：提示的默认字符
        required：如果有该属性，则该文本框为必填项
    -->
    <input type="text" name="username" value="张某某" maxlength="10" placeholder="请输入用户名" required>

效果展示：

②密码框

	<!--
    密码框属性：
        type="password"：类型为密码框
        placeholder：默认展示字符
    -->
    <p><input type="password"  name="password" placeholder="请输入密码"></p>

效果展示：

③单选框

    <!--
    单选框：
        type="radio"：类型为单选框
        name：设置成一样意思是将三个单选框设为一组，当选择了一个时就不会选择其他的单选框
        value：默认值
    -->

    <p>性别
        <input type="radio" value="boy" name="group1">男
        <input type="radio" value="girl" name="group1">女
        <input type="radio" value="!boy&girl" name="group1">人妖
    </p>

效果展示：

④多选框

       <p>
        <!--
        多选框：
            type="checkbox"：类型为多选框
            value：默认值
            name：一组用一个name
            checked：默认为选中状态
            注意：
                1. 若是要提交 , 则必须要有 name 和value属性
                k=v&k=v&k=v&k=v&k=v&k=v
                2. name就是key 提交的键 , vlaue就是提交的信息
        -->
        爱好
        <input type="checkbox" value="movie" name="hobby" checked/>看电影
        <input type="checkbox" value="music" name="hobby"/>听歌
        <input type="checkbox" value="road" name="hobby"/>压马路
        <input type="checkbox" value="code" name="hobby"/>敲代码
    </p>

效果展示：

⑤下拉框

    <!--
        下拉框：
            selected：默认选中

    -->

    <select name="列表名称">
        <option value="1" selected>北京</option>
        <option value="2">上海</option>
        <option value="3">陕西</option>
    </select>

效果展示：

⑥按钮

    <p>
        <!--
            按钮：
                type="button"：类型为按钮
                value：默认值
        -->
        <input type="button" value="myButton">
    </p>

效果展示：

⑦文件（选择文件）

    <p>
        <!--
            文件：
                type="file"：类型为文件
        -->
        <input type="file">
    </p>

效果展示：

⑧文本域

    <p>
        <!--
            文本域（多行的文本框）：
                cols：列
                rows：行
        -->
        <textarea name="textarea" cols="20" rows="10">
            
        </textarea>
    </p>

效果展示：

⑨搜索框

    <p><!--
        搜索框：
            type="search"：类型为搜索框
    -->
    请输入你要搜索的关键词 : <input type="search" name="search">
    </p>

效果展示：

⑩滑块

    <p>
        <!--
            滑块：
                type="range"：类型为滑块
                值的范围：0~100
                value：默认滑块在30%位置处
        -->
        滑块 : <input type="range" name="range" value="30">
    </p>

效果显示：

⑪邮箱

    <p>
        <!--
            邮箱：
                type="email"：类型为邮箱，会自动进行简单检验
                pattern:自定义正则校验
        -->
        邮箱 : <input type="email" name="email" pattern="^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$"/>
    </p>

效果显示：

⑫url

    <p>
        <!--
            url：
                type="url"：类型为url，会进行简单的校验
        -->
        url : <input type="url" name="url">
    </p>

在这里插入代码片

效果展示：

⑬数字

    <p>
        <!--
            数字：
                type="number"：类型为数字，会进行简单的校验
        -->
        数字 : <input type="number">
    </p>

效果展示

⑭提交与重填按钮

    <p>
        <!--
             提交按钮 : input type=submit
             重填按钮 : type="reset"
                提交会产生事件,会将表单的内容提交到action请求的地址,方法为method指定的方法
                submit默认文字是提交 , 手动给按钮赋值使用 value
        -->
        <input type="submit">
        <input type="reset">
    </p>

效果展示：

两个常用属性：只读和禁用

    <p> 
        <!--
            只读：readonly
            禁用：disabled
        -->
        <input name="name" type="text" value="张三"  readonly>
        <input type="submit " value="保存"  disabled  >
    </p>

效果展示：