表单

不念不忘少年蓝@ 2022-03-10 18:46 422阅读 0赞

表单创建
    <form  method="post" action="result.html">
       <p>  名字：<input name="name" type="text" >  </p>
       <p>  密码：<input name="pass" type="password" >  </p>
       <p>
          <input type="submit" name="Button" value="提交"/>
          <input type="reset" name="Reset" value="重填"/> 
       </p>
    </form>
    
    文本框
    <input  type="text"  name="userName" value="用户名" size="30" maxlength="20" />
    密码框
    <input  type="password "  name="pass"  size="20" />
    单选按钮
    <input name="gen" type="radio" value="男"  checked  />男
    <input name="gen" type="radio" value="女" />女
    复选框
    <input type="checkbox" name="interest" value="sports"/>运动
    <input type="checkbox" name="interest" value="talk" checked />聊天
    <input type="checkbox" name="interest" value="play"/>玩游戏
    
    列表框
    <select name="列表名称" size="行数">
    <option value="选项的值" selected="selected">…</option >
    <option value="选项的值">…</option >
    </select>
    
    图片按钮
    <input  type="reset" name="butReset" value="reset按钮">
    <input  type="image"  src="images/login.gif" />
    <input  type="button" name="butButton" value="button按钮"/>
    
    多行文本域
    <textarea  name="showText"  cols="x"  rows="y">文本内容 </textarea  >
    
    文件域
    <form action="" method="post" enctype="multipart/form-data">
      <p><input type="file" name="files" />
        <input type="submit" name="upload" value="上传" />
      </p>
    </form>
    
    邮箱
    <p>邮箱:<input type="email"  name="email"/></p>
     <input type="submit"/>
    
    数字
    <p>请输入数字:<input type="number"  name="num" min="0" max="100" step="10"/></p>
    <input type="submit"/>
    
    滑块
    <p>请输入数字:<input type="range"  name="range1" min="0" max="10" step="2"/></p>
    <input type="submit"/>
    
    网址
    <p>请输入你的网址:<input type="url"  name="userUrl"/></p>
    <input type="submit"/>
    
    搜索框
    <p>请输入搜索的关键词:<input type="search"  name="sousuo"/></p>
    <input type="submit"/>
    
    隐藏域
    <input type="hidden" value="666" name="userid">
    
    只读和禁用
    <input name="name" type="text" value="张三"  readonly>
    <input type="submit "  disabled   value="保存" >
    
    表单元素的标注（自动将焦点转移到与该标注相关的表单元素上）
    <form>
    	请选择性别：
        <label for="male">男</label>
        <input type="radio" name="gender" id="male"/>
        <label for="female">女</label>
        <input type="radio" name="gender" id="female"/>
    </form>
    
    提示语默认显示，当文本框中输入内容时提示语消失
    <input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>
    
    规定文本框填写内容不能为空，否则不允许用户提交表单
    <input type="text" name="username"  required/>
    
    用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
    <input type="text" name="tel"  required pattern="^1[358]\d{9}" />