HTML 表单和输入

HTML 表单用于收集不同类型的用户输入。表单元素是允许用户在表单中输入内容，比如：文本域，下拉列表，复选框等等

表单使用表单标签 <form> 来设置：大多数情况下被用到的表单标签是（<input>)输入类型是由类型属性(type)定义的//type规定的是元素类型，name是规定元素名称，只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

文本框：//当用户要在表单中键入字母、数字等内容

就像姓名之类的type用text，密码是password

单选是radio，复选是checkbox，提交的是submit

写提交的时候，在表单里面写action //目标地址

下拉菜单框：在选项后面加一个selected就是预选的内容

按钮的type是button。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>牛客教程(nowcoder.com)</title>
<style type="text/css">
    h1 {color:red;}
    p {color:blue;}
</style>
</head>
<body>
    <form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">

    </form>
    <form>
    Password: <input type="password" name="pwd"><!--密码-->
    </form>

    <form><!--单选按钮-->
    <input type="radio" name="sex" value="male"> Male <br>
    <input type="radio" name="sex" value="female"> Female
    </form>

    <form><!--复选按钮-->
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car
    </form>

    <form name="input" action="http://www.nowcoder.com" method="get"><!--数据提交地址-->
    Username: <input type="text" name="user">
              <input type="submit" value="Submit">
    </form>

    <form action="">
        <select name="cars">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="fiat">Fiat</option>
            <option value="audi">Audi</option>
        </select>
    </form>

    <form action="">
        <select name="cars">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="fiat" selected>Fiat</option> <!--预选-->
            <option value="audi">Audi</option>
        </select>
    </form>

</body>
</html>

以上的代码

文本框 <textarea rows="10" cols="30">我是一个文本框。</textarea>//rows高度，cols宽度

另外补充

id是唯一标识符，不允许重复

name是控件的名字，本身其实是不影响网页的，但是要提交后台数据库，所以设置

value控件的值

posted on 2020-01-30 23:09 夜隳·依子阅读(17) 评论(0) 收藏举报