0404 表单

0404 表单

1.在<form>标签外面写表单元素

<h3>用户注册</h3>
  <form action="register.php" id="regitser">
    <!-- 图像域 -->
    <input type="image" type="submit" src="button.png" width="100" />
  </form>
  <hr />
  <section>
    <label for="email">邮箱</label>
    <input type="email" name="email" id="register" form="regitser" />
  </section>
  <section>
    <label for="age">年龄</label>
    <input type="number" nama="age" min="18" max="30" id="age" form="regitser" value="20" step='5' />
  </section>

效果以及提交后的值

2.formaction属性可以将数据提交到不同的脚本

<h3>登录/注册</h3>
    <form>
        <section>
            <label for="username">姓名：</label>
            <input type="text" name='username' id='username' required autofocus>
        </section>
        <section>
            <label for="password">密码：</label>
            <input type="password" name='password' id='password' required>
        </section>
        <section>
            <button formaction="login.php" formmethod="POST" formtarget="_blank">登录</button>
            <button formaction="register.php" formmethod="get" formtarget="_blank">注册</button>
        </section>
    </form>

3.下拉列表

<form action="">
    <section>
        <select name="lang" id="lang" size='8' multiple onchange="alert(this.value)" onclick="alert(this.value)">
            <optgroup label="前端">
                <option value="HTML5">HTML5</option>
                <option value="CSS3" selected>CSS3</option>
                <option value="JavaScript">JavaScript</option>
            </optgroup>
            <optgroup label="后端">
                <option value="PHP" label="PHP">
                <option value="MYSQL" label="MYSQL">
                <option value="laravel" label="laravel">
            </optgroup>
        </select>
    </section>
</form>

4.文本域

<form action="">
      <section>
          <textarea name="content" id="content" cols="30" rows="10" placeholder="内容少于50字" minlength="5" maxlength="50"
                onselect="this.style.color='red'">你好</textarea>
          <button type="submit" formaction="register.php" formmethod="POST">提交</button>
      </section>
</form>

5.表单域分组元素

<form action="" id='register'></form>
    <fieldset name='base' form='register'>
        <legend>基本信息</legend>
        <section>
            <label for="email">邮箱:</label>
            <input type="email" name="email" id="email" placeholder="您的邮箱" form='register' autofocus>
        </section>
        <section>
            <label for="password1">密码:</label>
            <input type="password" name="password1" id="password1" placeholder="密码" form='register'>
        </section>
        <section>
            <label for="password2">重复密码:</label>
            <input type="email" name="password2" id="password2" placeholder="重复密码" form='register'>
        </section>
    </fieldset>
    <fieldset name='extend' form='register'>
        <legend>选填信息</legend>
        <section>
            <label for="nickname">昵称:</label>
            <input type="text" name="nickname" id="nickname" placeholder="昵称" form='register'>
        </section>
        <section>
            <label for="age">年龄:</label>
            <input type="number"" name=" age" id="age" placeholder="年龄" form='register'>
        </section>
    </fieldset>
    <button type="submit" form="register">提交</button>

6.总结

这节课的收获就是表单的formaction属性，可以提交到不同的后台脚本，这个之前没见过也没用过。目前为止html就学完了，重点就学了html5的代码规范、表格、表单这些。感觉内容比较少也比较简单，当然是因为时间紧。我希望后台框架、数据库优化等知识可以详细的讲解。