HTML表单元素
表单把用户的信息发给服务器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form class="stylin_form1" action="process_form.php" method="post">
<h3>A Stylin' Form</h3>
<!-- 控件组，即各种控件的容器 -->
<fieldset>
<!-- 控件组文字说明或者标题 -->
<legend><span>Part 1 •Basic Controls</span></legend>
<!-- 单行文本输入控件 -->
<section>
<p class="note">* indicates required field</p>
<!-- for属性把标注和空间关联起来，它的值必须与空间ID值相同 -->
<label for="user_name">User Name <span style="color: red;">*</span></label>
<!-- text属性让这个控件可以输入文本 -->
<input type="text" id="user_name" name="user_name" />
<p>Please select a user name</p>
</section>
<!-- 开始密码控件 -->
<section>
<label for="password">Password <span style="color: red;">*</span></label>
<!-- 密码文本显示为掩码 -->
<input type="password" id="password" name="password" maxlength="20" />
<p>Password must be 8 or more characters</p>
</section>
<!-- 开始多行文本输入控件 -->
<section>
<label for="desc">Description: </label>
<textarea name="desc" id="desc" placeholder="Enter the desc here."></textarea>
</section>
<!-- 开始HTML5日期控件 -->
<section>
<label for="special_date">Date:</label>
<input type="date" id="special_date" name="event_date" min="2024-08-09" />
</section>
</fieldset>
<fieldset>
<legend><span>Part 2 • Multiple-Choice Controls</span></legend>
<!-- 开始复选框 -->
<section>
<h4>Select Only One</h4>
<section>
<input checked="checked" id="radio1" name="radioset" type="radio" value="Choice_1" />
<label for="radio1">Choice 1 is pre-selected and shows the text wraps nicely
if it goes to multiple lines.</label>
</section>
<section>
<input checked="checked" id="radio2" name="radioset" type="radio" value="Choice_1" />
<label for="radio2">Choice 2</label>
</section>
<section>
<input checked="checked" id="radio3" name="radioset" type="radio" value="Choice_1" />
<label for="radio3">Choice 3</label>
</section>
</section>
<!-- 开始选项列表(下拉列表) -->
<section>
<label for="select_choice">Select Your Choice</label>
<select name="select_choice" id="select_choice">
<option value="0">None</option>
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
<option value="4">Choice 4</option>
</select>
</section>
<!-- 开始提交按钮 -->
<section>
<input type="submit" value="Submit This Form" />
</section>
</fieldset>
</form>
</body>
</html>form元素
action制定URL
method,post,get
提交表单
表单中数据以"名=值"的形式发给服务器
控件组
把一组表单组织到fieldset中，legend描述的文本。
控件与标注
label与input，for与id值一致。
控件类型
text:基本单行文本框
password:文本显示为掩码
checkbox:复选框
radio:单选按钮
submit:提交表单按钮
time,date,search:HTML5文本框变体
1291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
