H5学习笔记——form表单


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单title>
head>
<body>

    <h3>用户注册h3>

    <form action="http://www.baidu.com">
        <div>
            <label for="username">用户名:label>
            <input type="text" name="username" id="username">
        div>


        <br>

        <div>
            <label for="password">密码:label>
            <input type="password" name="password" id="password">
        div>
        <br>

        <div>
            <label for="">性别:label>
            <input type="radio" name="gender" id="male" value="0"> <label for="male">label>
            <input type="radio" name="gender" id="female" value="1"> <label for="female">label>

        div>
        <br>
        <div>
            <label for="">爱好:label>
            <input type="checkbox" name="like" id="game"  value="game"> <label for="game">游戏label>
            <input type="checkbox" name="like" id="sleep" value="sleep"> <label for="sleep">睡觉label>
            <input type="checkbox" name="like" id="jiaban" value="jiaban"> <label for="jiaban">加班label>
        div>
        <br>

        <div>
            <label for="">照片:label>
            <input type="file">
        div>

        <br>
        <div>
            <label for="">籍贯:label>
            <select name="site" id="">
                <option value="0">北京option>
                <option value="1">上海option>
                <option value="2">广州option>
                <option value="3">深圳option>
            select>div>

        <br>
        <div>
            <label for="statment">个人描述:label>
            <textarea name="info" id="statment" cols="30" rows="10">textarea>
        div>
        <br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" name="" value="按钮">

        <input type="hidden" name="" src=""> 
        <input type="image" name="">
    form>
body>
html>

get方式提交结果:

https://www.baidu.com/?
username=1111&
password=11111&
gender=0&
like=on&
site=2&
info=1111

post方式提交结果:
H5学习笔记——form表单_第1张图片


label中的for属性,可以绑定input的id属性,点击激活input输入框。

提交的时候,控件的name属性和value属性配合形成 name=value形式 提交到服务器。

input类型为hidden时候,可以利用name value值进行提交数据。
例如服务器传来的数据,和用户填写的数据一起提交的时候,就可以使用这种方式。

input类型为image时候,不推荐这种方式提交,有时候可能会出现连续提交两次的情况。

你可能感兴趣的:(H5)