创建表单

Posted 2020-10-27 明叶师兄。

创建表单

表单

    <form action="" method="post">
    <p>用户名：<input name="user" id="name" type="text" size="15" /></p>
    <p>密码：  <input name="password" type="password" size="15" /></p>
    <p>性别： 男 <input type="radio" name="sex" value="1"  checked />
            女 <input type="radio" name="sex" value="2"  /></p>
    <p>爱好：<input name="fav1" type="checkbox" value="1"/>跳舞
            <input name="fav1" type="checkbox" value="2"/>散步    
            <input name="fav1" type="checkbox" value="3"/>唱歌</p>
    <p>所在地：<select name="addr">
                <option value="1">河北</option>
                <option value="2">北京</option>
                <option value="3">天津</option>
            </select></p>
    <p>个性签名：<br/><textarea name="sign"></textarea></p>
    <p><input type="submit" name="submit" value="提交"/></p>
    </form>

表单三要素

• form标记
• 至少一个输入域（如input文本域或选择框）

• 提交按钮

  input标记type属性取值含义

• text 文本框 value=“请输入关键字”也可以为空
• password 密码框
• radio 单选框 checked默认选择
• checkbox 复选框
• file 文件域
• hidden 隐藏域 隐藏域不会显示在网页中，但是提交表单时会一起提交到服务器（必须有name属性和value属性）
• submit 提交按钮
• reset 重置按钮
• button 普通按钮

• image 图像按钮

  表单的辅助标记

• label标记 定义标签，通过for属性绑定控件，如果表单控件的id属性和label标记的for属性相同，那么label标记就会和表单控件关联起来。

• 字段集标记fieldset、legend

  html5新增的表单标记和属性

• input属性新增类型值

  网址输入框   <input type="url">
  email输入框   <input type="email">
  数字输入框   <input type="number">
  日期输入框   <input type="date">
  搜索输入框   <input type="search">
  范围滑动条   <input type="range">

• input标记新增的公共属性

  autofocus   <input autofocus="true">   设置元素自动获得焦点
  pattern     <input pattern="正则表达式">   使用正则表达式验证，例如：pattern="^[a-zA-Z\w(5,7)$]"
  placeholder   <input placeholder="默认内容">  设置文本框里的默认内容
  required   <input required="true">   是否检测文本框输入框的内容为空
  novalidate  <input novalidate="true">  是否验证文本输入框的内容
  autocomplete  <input autocomplete="on">  使form或input具有自动完成功能