Blogger Information
Blog 54
fans 4
comment 1
visits 54824
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
实例演示表单以及常用控件元素的使用
神仙不在的博客
Original
736 people have browsed it

form最常用的属性:action,name,method(我称之为表单三兄弟)

实例

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<h3>用户注册</h3>
<form action="" method="get" name="register">
  <p>
      <label for="username">账号</label>
      <input type="text" name="username" id="username" autofocus placeholder="请输入用户名">
  </p>
<p>
    <label for="password">密码</label>
    <input type="password" name="password" id="password" placeholder="密码不能太简单了">
</p>
  <p>
      <label for="email">邮箱</label>
      <input type="email" name="email" id="email" placeholder="example@mail.com" required>
  </p>
    <p>
        <label for="age">年龄</label>
        <input type="number" name="age" id="age" min="16" max="60">
    </p>
    <p>
        <label for="birthday">生日</label>
        <input type="date" name="birthday" id="birthday">
    </p>
    <p>
        <label for="course">课程</label>
        <select name="course" id="course">
            <option value="1">html</option>
            <option value="2">css</option>
            <option value="3">js</option>
            <option value="4" selected>php</option>
            <option value="5">mysql</option>
            <option value="6">thinkphp</option>
        </select>
    </p>
    <p>
        <label for="code">爱好</label>
        <input type="checkbox" name="hobby[]" id="game" value="game"><label for="game">游戏</label>
        <input type="checkbox" name="hobby[]" id="code" value="code"><label for="code">写代码</label>
        <input type="checkbox" name="hobby[]" id="movie" value="movie" checked><label for="movie">看片</label>
    </p>
    <p>
        <label for="male">性别</label>
        <input type="radio" name="gender" id="male" value="male"><label for="male">男</label>
        <input type="radio" name="gender" id="female" value="female"><label for="female">女</label>
        <input type="radio" name="gender" id="secret" value="secret" checked><label for="secret">保密</label>
    </p>
    <p>
        <label for="comment">简介</label>
        <textarea name="comment" id="comment" cols="30" rows="10" placeholder="不超过30个字"></textarea>
    </p>
    <p>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="按钮">
        <button>提交1</button>

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

单选,复选,下拉选不能忘写value,

required 是必填项

placeholder 是提示语(占位符)

autofocus是自动焦点

Correction status:qualified

Teacher's comments:请下次统一提交, 不要分多次
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post