初学HTML之form标签

form标签和input标签嵌套示例：

1、form表单提交数据的几个注意事项：

（1）所有获取用户输入的标签都必须放在form表单中
（2）action控制着往哪个地方提交
（3）input/select/textarea都需要有name属性
（4）提交按钮<input type=“submit”>

2、input系列：
（1）text
（2）password
（3）redio 单选
（4）checkbox 多选
（5）date 日期
（6）file 文件
（7）sleect 下拉菜单
（8）option 具体的下拉选项
（9）optgroup 分组的下拉框
（10）textarea 大段文本
（11）submit 提交
（12）button 普通按钮，多用js给它绑定事件
（13）reset 重置

<optgroup label="上海">   
</optgroup>

1、text ：输入文本

<!--规范写法-->
 <p>
        <label for="user1">用户名：</label>
        <input id="user1" name="username" type="text" value="强总" maxlength="10">
        <!--for对应的是标签中的id值，知道和哪个标签相关联-->
        <label>
            <input name="username" type="text" placeholder="强总" maxlength="10">
        </label>
    </p>
    
<!--不规范写法-->
<p>
	<input  name="username" type="text" maxlength="10">
</p>
说明:
	placeholder：在输入字段为空时显示，并会在字段获得焦点时消失
	maxlength：最大输入内容

2、password 密码

 <p>
        <label for="">密码：
            <input name="password" type="password" maxlength="10">
        </label>
    </p>

3、redio 单选

<p>性别：
        <label for="s1">男</label>
        <input id="s1" name="sex" type="radio">

        <label for="s2">女</label>
        <input id="s2"  name="sex" type="radio">

        <label>保密
            <input id="s3"  name="sex" type="radio" checked>
        </label>
        <!--加上label后，点击文字也能勾选上，否则必须选中框才能勾选-->
    </p>
说明：
	<!--checked：默认选中-->

4、checkbox 多选

<p>兴趣：
   <label for="">篮球
      <input name="habby" type="checkbox">
   </label>
   
   <label for="">足球
      <input name="habby" type="checkbox">
   </label>
   
   <label for="">羽毛球
       <input name="habby" type="checkbox">
   </label>
   
   <input name="habby" type="checkbox">台球
</p>

5、date 日期

<p>生日：
   <input name="birthday" type="date">
</p>

<p>具体生日：
   <input  name="birthday" type="datetime-local">
</p>

6、file 文件

<p>头像：
    <input name="file" type="file">
</p>

7、sleect 下拉菜单
option 具体的下拉选项
optgroup 分组的下拉框

 <select>
        <option name="city" value="1" selected>上海</option>
        <option name="city" value="2">北京</option>
        <option name="city" value="3">深圳</option>
        <option name="city" value="4">广州</option>
        <!--selected：默认选中-->
 </select>

<select>
  <optgroup label="北京">
       <option value="1">海淀</option>
	   <option value="2">朝阳</option>
	   <option value="3">昌平</option>
   </optgroup>
   <optgroup label="上海">
       <option value="1">黄埔</option>
       <option value="2">静安</option>
       <option value="3" selected>浦东</option>
   </optgroup>
</select>

8、textarea 大段文本

<p>
  <textarea name="info" id="t1" cols="30" rows="10"></textarea>
  <!--可以填写大量文本-->
</p>

9、submit 提交

<p>
   <input name="submit" type="submit" value="提交">
</p>

所有代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签</title>

</head>
<body>
<form action="" method="post" >
    <p>
        <label for="user1">用户名：</label>
        <input id="user1" name="username" type="text" value="强总" maxlength="10">
        <!--for对应的是标签中的id值，知道和哪个标签相关联-->
        <!--规范写法-->
        <label>
            <input name="username" type="text" placeholder="强总" maxlength="10">
        </label>
        <!--placeholder：在输入字段为空时显示，并会在字段获得焦点时消失-->
    </p>

    <p>
        <label for="">密码：
            <input name="password" type="password" maxlength="10">
        </label>
    </p>

    <p>性别：
        <label for="s1">男</label>
        <input id="s1" name="sex" type="radio">

        <label for="s2">女</label>
        <input id="s2"  name="sex" type="radio">

        <label>保密
            <input id="s3"  name="sex" type="radio" checked>
            <!--checked：默认选中-->
        </label>
        <!--加上label后，点击文字也能勾选上，否则必须选中框才能勾选-->
    </p>

    <p>爱好：
        <label for="">篮球
            <input name="habby" type="checkbox">
        </label>
        <label for="">足球
            <input name="habby" type="checkbox">
        </label>
        <label for="">羽毛球
            <input name="habby" type="checkbox">
        </label>
        <input name="habby" type="checkbox">台球
    </p>

    <p>生日：
        <input name="birthday" type="date">
    </p>

    <p>具体生日：
        <input  name="birthday" type="datetime-local">
    </p>

    <p>头像：
        <input name="file" type="file">
    </p>

    <select>
        <option name="city" value="1" selected>上海</option>
        <option name="city" value="2">北京</option>
        <option name="city" value="3">深圳</option>
        <option name="city" value="4">广州</option>
        <!--selected：默认选中-->
    </select>

    <select>
        <optgroup label="北京">
            <option value="1">海淀</option>
            <option value="2">朝阳</option>
            <option value="3">昌平</option>
        </optgroup>
        <optgroup label="上海">
            <option value="1">黄埔</option>
            <option value="2">静安</option>
            <option value="3" selected>浦东</option>
        </optgroup>
    </select>

    <p>
        <textarea name="info" id="t1" cols="30" rows="10"></textarea>
        <!--可以填写大量文本-->
    </p>

    <p>
        <input name="submit" type="submit" value="提交">
    </p>

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

初学HTML之form标签

form标签和input标签嵌套示例：

猜你喜欢