首页 > 代码库 > HTML表单

HTML表单

2024-09-11 06:22:53   220人阅读

HTML表单

 1.HTML表单是<from>元素，表单包括的HTML元素有:

 

    • <input>
    • <textarea>
    • <button>
    • <select>
    • <optgroup>
    • <option>
    • <label>
    • <fieldset>
    • <legend>
    • <datalist>
    • <keygen>
    • <output>

2.表单的属性：

技术分享

3.HTML5新增了几种Input类型：

    • email
    • url
    • number
    • range
    • Date pickers(date,month,week,time,datetime,datetime-local)
    • search
    • color

技术分享

 

*输入限制：

技术分享

 

4.表单例子：

 

<form action="{:U(‘Form/saveBasicForm‘)}" method="post">
    
    <input type="hidden" name="hidden" value="http://www.mamicode.com/hidden" /><!-- 隐藏域 -->
    <label>文本：</label>
    <input type="text" name="text"><br /><br />
    
    <label>密码域：</label>
    <input type="password" name="password"><br /><br />
    
    <label>单选框：</label>
    <input type="radio" name="radio"><br /><br />
    
    <label>多选框：</label>
    <input type="checkbox" name="checkbox"><br /><br />
    
    <label>按钮：</label>
    <input type="button" onclick="alert(‘Hello World!‘)" value="Click Me!"><br /><br />
    
    <label>手机号码(type="tel")：</label>
    <input type="tel" name="tel" required><br /><br />
    
    <label>文本域：</label>
    <textarea name="content" wrap="classical">
        中共中央总书记国家主席中央军委主席
    </textarea>
    <br /><br />

    <label>下拉框：</label>
    <select>
      <option value ="volvo">Volvo</option>
      <option value ="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
    <br /><br />
    
    <label>分组下拉框：</label>
    <select>
      <optgroup label="Swedish Cars">
        <option value ="volvo">Volvo</option>
        <option value ="saab">Saab</option>
      </optgroup>
    
      <optgroup label="German Cars">
        <option value ="mercedes">Mercedes</option>
        <option value ="audi">Audi</option>
      </optgroup>
    </select>
    <br /><br />
    
    <div style="width:500px;height:500;">
        <fieldset>
           <legend>H5新的输入类型</legend>
            email()：<input type="email" name="email" /><br /><br />
                url：<input type="url" name="url" /><br /><br />
             number：<input type="number" name="number" /><br /><br />
              range：<input type="range" name="range" /><br /><br />
             search：<input type="search" name="search"/><br /><br />
              color：<input type="color" name="color"/><br /><br />
        </fieldset>
    </div>
    <br /><br />
    
    <input type="submit" value="提交" /><!-- 提交 -->
</form>

 

 技术分享

注：datepicker在一些浏览器中不能显示，所以在这里不做示例

　　上传文件例子：

 

<form action="{:U(‘Form/saveFile‘)}" method="post" enctype="multipart/form-data">
     <input type="file" name="fileUpload" />
     <input type="submit" value="上传文件" />
</form>

 

技术分享

 

HTML表单


联系
我们