html表单总结

总结了下html表单:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dada</title>
</head>
<body>
    <form action="action.php" method="post" accept-charset="UTF-8" autocomplete="on" enctype="url-encoded" target="_self">
        <!--组合表单中的相关数据-->
        <fieldset>
            <!--为fieldset元素定义标题-->
            <legend>hello</legend>
            <!--文本输入-->
            firstname:<input type="text" name="firstname"><br>
            <!--单选按钮输入-->
            <input type="radio" name="male">male
            <input type="radio" name="female">female<br>
            <!--复选框-->
            <input type="checkbox" name="vehicle" value="bike">i have a bike.
            <input type="checkbox" name="vehicle" value="car">i have a car<br>
            <!--按钮-->
            <input type="button" onclick="alert('hello')" value="click me"><br>
            <!--提交按钮-->
            <input type="submit" name="submit"><br>
            <!--下拉列表-->
            <select name="fruit">
                 <option value="apple">apple</option>
                 <option value="grape">grape</option>
                 <option value="watermelon" selected="">watermelon</option>
                 <option value="cherry">cherry</option>
            </select><br>
            <!--文本域-->
            <textarea name="message" rows="10" cols="30">
                the cat was playing in the garden.
            </textarea><br>
            <!--可点击的按钮-->
            <button type="button" onclick="alert('hello')">
                click me!
            </button><br>
            <!--html5新增-->
            <!--datalist元素为input元素预定义选项列表-->
            <form>
            <input list="browsers">
            <datalist id="browsers">
                <option value="Internet Explorer">
                <option value="firefox">
                <option value="chorme">
                <option value="opera">
                <option value="safari">
            </datalist><br>
            <form>
            <!--输入类型number用于包含数字值-->
            <input type="number" name="quantity" min="1" max="5" step="10" value="30">number<br>
            <!--输入类型date用于包含日期-->
            <input type="date" name="cday" max="1980-1-1" min="2018-7-2">date<br>
            <!--输入类型color用于包含颜色-->
            <input type="color" name="favcolor">color<br>
            <!--输入类型range用于包含一定范围内的值的输入字段-->
            <input type="range" name="points" min="0" max="10" step="2" value="8">range<br>
            <!--输入类型month允许用户选择年月-->
            <input type="month" name="cdaymonth">month<br>
            <!--输入类型week允许用户使用周和年-->
            <input type="week" name="week_year">week<br>
            <!--输入类型time允许用户选择时间(无时区)-->
            <input type="time" name="usr_time">time<br>
            <!--输入类型datetime允许用户选择日期和时间(有时区)-->             
            <input type="datetime" name="cday">datetime<br>
            <!--输入类型datetime-local允许用户选择时间-->
            <input type="datetime-local" name="cday">datetime-local<br>
            <!--输入类型email用于包含电子邮件地址-->
            <input type="email" name="email">email<br>
            <!--输入类型search用于搜索字段-->
            <input type="search" name="search">search<br>
            <!--输入类型tel用于电话号码输入-->
            <input type="tel" name="tel">tel<br>
            <!--输入类型url,根据浏览器支持,提交时自动验证url-->
            <input type="url" name="url">url
        </fieldset>
    </form> 
</body>
</html>

效果如下

hello firstname:
male female
i have a bike. i have a car






number
date
color
range
month
week
time
datetime
datetime-local
email
search
tel
url

猜你喜欢

转载自www.cnblogs.com/breathee/p/9255354.html