w3school html 表单

HTML 表单

表单的作用：搜集不同类型的用户输入

HTML 表单属性

常用的表单属性有 action 属性，target 属性，method 属性

• action：action属性定义提交表单时要执行的操作
• target：target属性规定表单提交后在何处显示响应
• method: method属性指定提交表单数据时使用的HTTP方法

示例：实现在页面上下拉框选中元素后跳转到新的页面，显示选中结果的图片

原始页面： 含列表项供选择

跳转页面： 另一个页面，显示图片

<form action="1.%20表单.html" target="_blank">
    <input list="fruit"/>
    <datalist id="fruit">
        <option value="apple"/>
        <option value="orange"/>
        <option value="banana"/>
    </datalist>
    <br/><br/>
    <input type="submit"/>
</form>

上述代码中：action 指定跳转到新的页面（图片显示）
target 指定新页面在空白窗口显示

HTML 表单元素

常用的表单元素有 input 元素，select 元素，textarea 元素，button 元素，datalist 元素

• input 元素中常用的有 文本输入，单选按钮输入，提交按钮
• select 元素用于定义下拉列表
• textarea元素用于定义多行输入字段
• button 元素用于定义可点击的按钮
• datalist 元素为 input 元素规定预定义列表

1. input 元素的几种类型
   

<form class="formelement">
    <h5>1.文本输入，type="text"</h5>
    fname: <input type="text" name="firstname"/>
    <br/>
    <br/>
    lname: <input type="text" name="lastname"/>
    <br/>
    <h5>2.单选按钮输入，type="radio"</h5>
    <p>性别：</p>
    <input type="radio" name="sex" value="female" checked/> Female
    <br/>
    <input type="radio" name="sex" value="male"/> Male
    <br/>
    <h5>3.提交按钮，type="submit"</h5>
    爱好：<input type="text" name="hobby" value="coding"/>
    <br/>
    <br/>
    提交：<input type="submit" name="submit"/>
    <br/>
</form>

2. select 实现下拉列表
   

<form action="1.%20表单.html">
    <select name="cars">
        <option value="baoma">baoma</option>
        <option value="benchi">benci</option>
        <option value="lsls" selected>lsls</option>
        <option value="bentian">bentian</option>
    </select>
    <br/>
    <br/>
    <input type="submit"/>
</form>

3. textarea 实现文本域
   

<form action="1.%20表单.html">
    <textarea name="text" rows="10", cols="45">
    我能感觉到，我在平淡如水地度过五年后我会
    为之扼腕叹息的那段黄金时光。
    但是我所能做的只有安静地沉淀，
    我想要在余生尽力沉淀出一点点结晶，
    就像是茨威格写的旧书店门德尔那样。
    </textarea>
    <br/>
    <input type="submit"/>
</form>

4. button 元素实现事件响应
   

<form action="1.%20表单.html">
    <button onclick="alert('hello java')">点击</button>
</form>

5. datalist 实现预定义列表，预定义列表可用于下拉框选择和文本输入时提示
   

<form action="1.%20表单.html">
    <input list="browers">
    <datalist id="browers">
        <option value="Explorers"/>
        <option value="firefox"/>
        <option value="google"/>
        <option value="opera"/>
        <option value="chrom"/>
    </datalist>
    <input type="submit"/>
</form>

datalist 和 select 的区别

• datalist 只能嵌套在 input 中，不能单独使用，可用于list 和 text
• select 单独使用

HTML 输入类型

<form>
    <h4>1. text类型</h4>
    用户：<input type="text" name="user"/>
    <br/>
    <h4>2. password类型</h4>
    密码：<input type="password" name="pwd"/> <br/>
    <p><b>注释：</b>password字段中的字符会被做掩码处理</p>
    <p>（显示为星号或实心圆）</p>
    <h4>3. submit类型</h4>
    提交：<input type="submit" name="submit"/>
    <br/>
    <h4>4. radio单选按钮</h4>
    <input type="radio" name="sex" value="male"/> male
    <br/>
    <input type="radio" name="sex" value="female" checked/> female
    <br/>

    <h5>5. checkbox复选框</h5>
    <input type="checkbox" name="vehicle" value="car" checked/> car
    <br/>
    <input type="checkbox" name="vehicle" value="bike" checked/> bike
    <br/>

    <h5>6. botton按钮</h5>
    <input type="button" onclick="alert('hello java')" value="click"/>

    <h5>7. number类型</h5>
    <input type="number" name="quantity" min="1" max="5"/>
    <input type="submit" name="submit"/>

    <h5>8. date类型</h5>
    生日：<input type="date" name="date"/>
    <input type="submit" name="submit"/>
    <br/>

    <h5>9. color类型</h5>
    颜色：<input type="color" name="color"/>
    <input type="submit" name="submit"/>
    <br/>

    <h5>10. range类型</h5>
    范围：<input type="range" name="range" min="0" max="10"/>
    <input type="submit" name="submit"/>

    <h5>11. month类型</h5>
    月份：<input type="month" name="month"/>
    <input type="submit" name="submit"/>

    <h5>12. week类型</h5>
    周：<input type="week" name="week"/>
    <input type="week" name="submit"/>

    <h5>13. time类型</h5>
    时间：<input type="time" name="time"/>
    <input type="submit" name="submit"/>

    <h5>14. datetime-local类型无时区</h5>
    日期：<input type="datetime-local" name="datetime"/>
    <input type="submit" name="submit"/>

</form>

HTML 输入属性

<form>
    <h4>1. value属性规定输入字段的初始值</h4>
    value: <input type="text" name="text" value="apple"/>
    <br/>

    <h4>2. size属性规定输入字段的属性</h4>
    no size: <input type="text" name="fname" value="john" />
    <br/><br/>
    add size: <input type="text" name="fname" value="john" size="2"/>
    <br/>

    <h4>3. height和width属性</h4>
    设置文本<input type="text" name="text" value="java" width="30" height="30"/>
    <br/><br/>
    设置图片<input type="image" src="apple.jpg" alt="apple" width="150" height="100"/>
    <br/><br/>
    <p><b>注释：</b>height和width属性仅用于</p>
    <p>&lt;input type="image"&gt;</p>

    <h4>4. list属性</h4>
    <input list="people"/>
    <datalist id="people">
        <option value="mom"/>
        <option value="dad"/>
        <option value="brother"/>
        <option value="uncle"/>
    </datalist>

    <h4>5. max和min属性</h4>
    <textarea name="max&min" rows="10" cols="30">
     min 和 max 适用于如需输入类型：
     number, range, date,
     datetime-local,month,time,week
    </textarea>
    <br/>
    number : <input type="number" max="5", min="0"/>
    <input type="submit" name="submit"/><br/>

    range : <input type="range" max="5", min="0"/>
    <input type="submit" name="submit"/><br/>

    date : <input type="date" max="2021-11-15", min="1997-07-07"/>
    <input type="submit" name="submit"/><br/>

    <h4>6. step属性</h4>
    step : <input type="number" name="number" step="3"/>
    <input type="submit" name="submit"/><br/>
</form>