input标签详解，用户注册表单

input标签的；

action；把数据提交给服务器的地址，若没有就提交给自己

method ；提交的方式（post , get ）

type中可以指定的 number tel 来指定数字电话号码或者使用date 来指定时间

含有text <input type=“text” name="username" placeholder=“请输入name” > name属性会随提交（form）到其他页面就是作为参数
password
file (上传文件的)
radio （单选按钮，比如选择性别的时候给起一个名字（名字相同的话）只能单选

默认的是chacked ="checked"

checkbox 多选（方框）复选按钮

默认的是chacked ="checked" （可以写多个默认勾选）

textarea 一个区域的文本框设置 cols 和rows 来定框的大小

style =reset-non 不重新设置大小；

---------------------------------------------------------------------------------------------------------------------------------

扫描二维码关注公众号，回复： 3399932 查看本文章

select 标签下拉列表请选择 option 子标签；

提交按钮 <input type=“submit ” value=“提交，注册”/>

重置按钮<input type= "reset' value="重置">

普通按钮<input type="botton" value="普通" >

botton 按钮具有默认提交表单的功能，如果不指定type 就会提交表单

-------------------------------------------------------------------------------------------------------------------------------------------

form 表单标签提交的内容包裹所需要提交的内容

action 属性要提交的地址 # 代表是本地地址

method get 方式（默认的提交方式,，把请求方式拼接在请求页面，有大小的限制4KB）

post方式（把请求方式封装在请求体中）

只有存在name时候才能接收数据

----------------------------------

必须要有name 才能够提交；

若是单选或者复选框，必须提供value ，

-------------------------------------------------------------------------------------------------------------------------------------------

placeholder 是一种提示信息

提交按钮；

使用 lable 标签来定义，查找；<lable></lable>

附代码；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交</title>
</head>
<body>
<!--只有在form中定义name浏览器才能够提交数据 -->

<form action="#" method="get" name="getForm">
    <!-- 用户名 <input type="text" name="username">
     密码 <input type="password" name="password">
      <input type="submit" value="提交" >-->

    <!--单选框和复选框必须定义 name, value ,默认值checked -->
    <!--    性别； <input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female">女
        <br/>
        兴趣爱好； <input type="checkbox" name="hobby" value="sw"> 游泳
        <input type="checkbox" name="hobby" value="re"> 看书
        <input type="checkbox" name="hobby" value="tr"> 旅游
        <input type="checkbox" name="hobby" value="sle"> 睡觉
        <br/>
        <input type="submit" value="提交啦">-->

    <!--   <select name="dd" id="findby">
           <option value="zhizhi">日本</option>
           <option value="zhizhi">美国</option>
           <option value="zhizhi">朝鲜</option>
           <option value="zhizhi">俄罗斯</option>
       </select>
       <input type="submit" value="提交">-->

    <!--input标签中type=text，value默认的，placeholder是隐藏的文字  -->
    <!-- 请输入账户；<input type="text" value="请输入账户" name="zhanghu"><br/>
     请输入密码；<input type="password" placeholder="请输入密码" name="password">
     <input type="submit" value="提交按钮">-->

    <!-- input标签， 文件上传 type=file-->
    <!--  <input type="file">
      <input type="submit" value="提交">-->

    <!--input标签中隐藏域，hidden-->
    <!--   <input type="hidden" name="这是隐藏域" value="这是隐藏域对应的值">
       <button value="提交">提交啊</button>&lt;!&ndash; button标签默认有提交的功能&ndash;&gt;-->

    <!--文本域areatext标签  指定style="resize:none" 使文本框不能被拉伸   ，图片按钮typeimage -->
    自我介绍；<textarea name="jieshao" id="1" cols="30" rows="10" style="resize: none"></textarea>
    <br/>
    用户名；<input type="text" name="username">
    <input type="image" src="../img/0x424410190743.jpg">
</form>
</body>
</html>

用户注册表单；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
<form action="#" name="register" method="get">
<!--分析用户注册，表头h 8行2列
用户名 密码 性别 爱好 学历照片 个人简介   其中lable标签
-->
    <h2>用户注册</h2>
<table  width="500px">
    <tr>
        <td><lable for="username">用户名</lable></td>
        <td><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
    </tr>
    <tr>
        <td><lable>密码</lable></td>
        <td><input type="password" name="password" placeholder="请输入密码"></td>
    </tr>
    <tr>
        <td><lable for="gender">性别</lable></td>
        <td>
            <input type="radio" name="gender" id="gender" value="male">男
            <input type="radio" name="gender"  value="female">女
            <input type="radio" name="gender"  value="null">妖
        </td>
    </tr>
    <tr>
        <td><lable>爱好</lable></td>
        <td>
            <input type="checkbox" name="hobby" value="sw">游泳
            <input type="checkbox" name="hobby" value="ds">读书
            <input type="checkbox" name="hobby" value="ly">旅游
            <input type="checkbox" name="hobby" value="qj">拳击
        </td>
    </tr>
    <tr>
        <td><lable>学历照片</lable></td>
        <td><input type="file" name="username" placeholder="请输入用户名"></td>
    </tr>
    <tr>
        <td><lable>个人简介</lable></td>
        <td><textarea name="jianjie" id="1" cols="30" rows="10"></textarea></td>
    </tr>
    <tr>
        <td colspan="2">
            <input type="submit" value="提交">
            <input type="reset" value="重置">
            <input type="button" value="点击">
        </td>
    </tr>
</table>

</form>
</body>
</html>

input标签详解，用户注册表单

猜你喜欢