文本框(Input)
HTML中的文本框用于接收用户输入的文本信息。以下是创建一个简单文本输入框的示例代码:
<form> <label for="username">用户名:</label> <input type="text" id="username" name="username"> </form>
在上面的代码中,我们使用了 <input> 元素来创建一个文本框,并指定了 type="text",表示这是一个文本输入框。用户输入的内容将被赋予给 name 属性为 "username" 的变量。
单选框和复选框(Radio & Checkbox)
单选框用于让用户在多个选项中选择一个,而复选框则允许用户选择多个选项之一或多个。以下是单选框和复选框的示例代码:
<form> <input type="radio" id="male" name="gender" value="male"> <label for="male">男性</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">女性</label><br> <input type="checkbox" id="vehicle1" name="vehicle1" value="bike"> <label for="vehicle1">自行车</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="car"> <label for="vehicle2">汽车</label><br> </form>
在上面的代码中,我们使用了 <input>
元素来创建单选框和复选框,并通过 type
属性来指定它们的类型。name
属性用于将选项分组,value
属性则表示选项的值。
下拉列表(Select)
下拉列表用于从预定义的选项中选择一个。以下是创建一个简单下拉列表的示例代码: 选择一种汽车: 沃尔沃SaabFiat奥迪
<form> <label for="cars">选择一种汽车:</label> <select id="cars" name="cars"> <option value="volvo">沃尔沃</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">奥迪</option> </select> </form>
在上面的代码中,我们使用了 <select>
元素来创建一个下拉列表,并使用 <option>
元素来定义列表中的选项。用户可以通过点击下拉列表来选择一个选项。
综合表单代码示例
<form> <label for="username">用户名:</label> <input type="text" id="username" name="username"><br><br> <label for="gender">性别:</label> <input type="radio" id="male" name="gender" value="male"> <label for="male">男性</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">女性</label><br><br> <label for="interests">兴趣爱好:</label> <input type="checkbox" id="coding" name="interest" value="coding"> <label for="coding">编程</label> <input type="checkbox" id="reading" name="interest" value="reading"> <label for="reading">阅读</label> <input type="checkbox" id="sports" name="interest" value="sports"> <label for="sports">运动</label><br><br> <label for="country">选择您所在的国家:</label> <select id="country" name="country"> <option value="china">中国</option> <option value="usa">美国</option> <option value="uk">英国</option> <option value="germany">德国</option> </select><br><br> <input type="submit" value="提交"> </form>
通过上面的代码示例,我们创建了一个包含文本框、单选框、复选框和下拉列表的网页注册表单。用户可以填写用户名、选择性别、勾选兴趣爱好,并从下拉列表中选择所在国家。这个综合示例展示了HTML中常用的表单元素在一个表单中的综合应用。