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<br>
           <!--file-->
           <input type="file" name="file">
        </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

更多专业前端知识,请上 【猿2048】www.mk2048.com
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值